<h2 id="chamada"><a href="#chamada" class="anchor">Chamada</a></h2>
<p>Olá pessoal, como o título do post já diz, ele é na realidade só uma chamada para o meu mais novo <strong>Curso de Git e Github na Vida Real</strong>, o curso está em fase de produção, mas já quero compartilhar um pouquinho sobre ele com vocês, porque estou bastante ansioso com ele!</p>
<p>Para quem não sabe, eu já tenho um curso sobre o assunto na Udemy que é o <a href="https://www.udemy.com/git-e-github-para-iniciantes/">Git e Github para Iniciantes</a>, esse curso já tem hoje mais de <strong>25 mil</strong> alunos e milhares de reviews. Por ter sido um dos meus primeiros cursos, eu aprendi muito com os feedbacks e evoluí em vários aspectos.</p>
<p>E pensando nisso, eu venho colhendo várias informações e dúvidas que as pessoas tem sobre Git e Github para criar um curso mais avançado e mais específico. Para ir além do básico <strong>pull/push</strong>, que agora todo mundo já aprendeu no curso anterior. No novo curso eu vou abordar comandos mais avançados e que são necessários no nosso cotidiano. Além disso, eu vou falar sobre os workflows mais comuns utilizados nas empresas, o que vai facilitar para que as pessoas tenham uma visão melhor e se adaptem mais facilmente ao entrar numa nova empresa. Enfim, eu criei um vídeo falando um pouco sobre o curso e você pode assistir logo abaixo:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/SycgKYTKS5Q" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<h2 id="perguntas-e-respostas"><a href="#perguntas-e-respostas" class="anchor">Perguntas e Respostas</a></h2>
<blockquote>
<p>Quando o curso será lançado?</p>
</blockquote>
<p>Eu planejo lançar em meados de Fevereiro, como disse acima, as gravações já iniciaram e a ementa está praticamente 100% feita (numa das atualizações vou liberar sobre).</p>
<blockquote>
<p>Qual vai ser a duração do curso?</p>
</blockquote>
<p>Não tenho como dar um tempo exato de quanto o curso vai ter, mas como já é comum dos meus cursos, serão vídeos curtos e objetivos. Acho que dessa forma vocês conseguem absorver melhor e até utilizar o curso como uma referência rápida para alguma dúvida. Cursos e vídeos muito grandes tendem a ser cansativos e desestimular o aluno.</p>
<blockquote>
<p>O curso vai ter certificado?</p>
</blockquote>
<p>Sim, o curso terá certificado liberado através da Udemy para todos aqueles que completarem 100% das aulas.</p>
<blockquote>
<p>Qual o preço do curso?</p>
</blockquote>
<p>Para garantir que a Udemy vai gerar certificado para todos (ele limita em cursos gratuitos), esse curso será pago, mas pretendo lançá-lo no valor mínimo <strong>20-25 reais</strong>, o objetivo é que quanto mais pessoas façam o curso melhor! Outra coisa legal, eu irei liberar vários cursos gratuitos lá no <a href="https://bit.ly/slack-will">slack dos meus alunos</a>, então se quiser pegar um curso na faixa, só entrar lá =)</p>
<blockquote>
<p>O que preciso saber para fazer o curso?</p>
</blockquote>
<p>Como falei no vídeo acima, precisa ter só o básico de Git ou feito o <a href="https://www.udemy.com/git-e-github-para-iniciantes/">meu curso na Udemy</a>.</p>
<blockquote>
<p>Em quanto tempo preciso fazer o curso?</p>
</blockquote>
<p>Você pode fazer no seu tempo, o curso é vitalício! Faça 1x, 2x, infinitas vezes e quando quiser!</p>
<blockquote>
<p>Como posso saber quando o curso foi lançado?</p>
</blockquote>
<p>Todos os meus alunos serão avisados lá no <a href="https://bit.ly/slack-will">slack</a> e também na plataforma da Udemy.</p>
<h2 id="conclusão"><a href="#conclus%C3%A3o" class="anchor">Conclusão</a></h2>
<p>Espero que gostem bastante desse curso, estou me dedicando para fazer algo bem legal para a comunidade. E se você acha que vai ser legal, compartilha esse post com seus amigos de trabalho, amigos de fórum, família, gato, cachorro, papagaio! Qualquer dúvida e/ou sugestão, comenta aí embaixo! Como o curso ainda está em produção, vou levar todos os comentários para a criação! E calma, calma, não vai não! Você pensou mesmo que ia ficar sem música? O post de hoje eu deixo com a banda <a href="https://open.spotify.com/artist/29Wmfm1CojrjQ3aQP0FI65">All Them Witches</a>, outra banda altamente influenciado por Led Zeppelin e Black Sabbath. Abraço!</p>


Vamos dominar o Git e não ficar mais desesperado com conflitos e arquivos perdidos!

Chamada Curso Git e Github na Vida Real


## Introdução

Fala pessoal, faz tanto tempo que não escrevo um post mais técnico, então por que não escrever um post sobre `SVG` já que eu amo tanto. Enquanto escrevo esse post, vou ouvindo uma banda que já falei em outra oportunidade, mas que é sempre bom ouvir de novo, trata-se de [Ghost](https://www.youtube.com/watch?v=neRhGoW3Kbc&list=RDneRhGoW3Kbc&start_radio=1&t=7) e o link leva para um acústico muito bom.

## Ideia do Post

Eu resolvi fazer esse post, pois recebi um email do [Unsplash](https://unsplash.com/@willianjusten) falando que eu tinha acabado de completar **10 milhões** de views em minhas fotos! E não só a notícia me deixou feliz, como o detalhe que fizeram em colocar uma das minhas fotos como fundo para os números.

![Um screenshot do email com 10M escrito sobre uma foto de uma cachoeira](/assets/img/mask-svg/screenshot.png)

É um efeito extremamente simples de se fazer, mas que ficou super bonito e único. Então vamos lá aprender a fazer isso e brincar em nossos novos sites e aplicações!

**Importante:** por se tratar de propriedades experimentais, é possível que não funcione em todos os dispositivos e browsers. Por preferência veja no Chrome Desktop =)

## Clipping

Para quem já usou Photoshop deve conhecer o `Clipping Mask` e o que faremos não é nada diferente disso. O Clipping envolve usar uma camada com uma forma (um círculo, triângulo, texto) sobre uma imagem ou um elemento. Qualquer coisa atrás dessa forma fica aparente e o resto ao redor some. Segue um exemplo abaixo:

![Uma forma sobre uma imagem criando o Clipping](https://getflywheel.com/wp-content/uploads/2016/08/css-svg-clipping-masking-clipping-graphic.jpg)

### Clip em ação

Já entendendo a teoria, vamos logo para prática, porque é o que importa. É possível se criar o Clipping de duas formas.

#### Clip-path com CSS

Uma das formas disponíveis é o [Clip-path do CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path), mas que a [compatibilidade](https://caniuse.com/#feat=css-clip-path) ainda é um pouco baixa. Segue abaixo um exemplo:

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="bayPyB" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/willianjusten/pen/bayPyB">
  </a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Como você pode ver, eu utilizei duas classes com a propriedade `clip-path`:

```css
.polygon {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.circle {
  clip-path: circle(100px at 150px 100px);
}
```

Sobre o `.polygon`, você basicamente define os pontos com as coodenadas do eixo (x,y), ou seja, a primeira coordenada (primeiro ponto) possui um deslocamento de `50%` no eixo `x` e `0%` no eixo y.

Para o `.circle`, o primeiro valor é o tamanho do Raio e o segundo é a coordenada do centro do círculo. Ou seja, um raio de `100px`, que tem como centro `150px` no eixo `x` e `100px` no eixo `y`.

#### Clip-path com SVG

Enquanto o `clip-path` do CSS não é compatível em tudo, usando SVG você alcança a compatibilidade em tudo, visto que ele usa SVG por natureza, que segue a seguinte [compatibilidade](https://caniuse.com/#feat=svg).

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="vpwodK" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/willianjusten/pen/vpwodK">
  </a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Para fazer funcionar, é extremamente similar ao feito com o CSS, mas a diferença é que a forma é criada no SVG, segue abaixo o código:

```html
<svg class="clip-svg">
  <defs>
    <clipPath id="triangle-mask" clipPathUnits="objectBoundingBox">
      <polygon points="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
    </clipPath>
  </defs>
</svg>
```

Repare em duas coisas importantes, primeiro uma classe no externo do SVG, que é o `clip-svg`, todo SVG por padrão vem com um tamanho no Browser e ocupa um espaço, então para remover isso, adicionamos essa classe e zeramos `height` e `width` no css. E depois temos o id `#triangle-mask`, que vai ser referenciado no nosso css, de forma a criar o clip que desejamos. E para determinar isso, é só uma linha:

```css
clip-path: url('#triangle-mask');
```

Gostou disso, mas achou extremamente difícil/chato criar as formas? Não se preocupe! Existe uma ferramenta chamada [Clippy](http://bennettfeely.com/clippy/). Através dela você tem formas pré-determinadas e também pode criar as suas.

![Screenshot do site Clippy](/assets/img/mask-svg/clippy.png)

## Masks

Diferente do `clip-path` que definimos as "bordas" de onde queremos ter a imagem e eliminamos o resto. Na máscara nós queremos fazer uma composição, que as vezes pode conter toda a imagem ou não.

### Mask no SVG e no CSS

Para criar as máscaras, nós utilizamos o `<mask>` do SVG e a propriedade `mask` do css. Segue abaixo um exemplo:

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="rpENJY" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/willianjusten/pen/rpENJY">
  </a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Como podemos ver no exemplo, possuímos `3 componentes`, o primeiro elemento é a imagem `.background`, depois temos o retângulo `.base` que é o cara que fica por cima da imagem e onde iremos aplicar a `#mask`, que é o que faz a mágica acontecer. Dentro da `#mask` nós temos o `.alpha` que é responsável por criar a transparência da máscara, quanto mais próximo de `#000` (preto) fica mais transparente e quanto mais próximo de `#fff` (branco), mais opaco fica e o nosso texto, que convenientemente usamos o `<text>` do SVG. E para tudo funcionar, é só usar `mask: url(#mask);`.

O legal é que as máscaras funcionam não só com imagens estáticas, mas podem ter animações e até vídeos! Segue abaixo um exemplo onde o fundo é um gradiente sendo animado:

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="xpobbm" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/willianjusten/pen/xpobbm">
  </a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Repare que no exemplo acima, a base é a mesma, possuímos um `<mask>` no SVG que contém o texto e essa máscara é aplicada em outro elemento usando `mask: url('#mask');`.

Ou seja, a base sempre será a mesma, tenha um svg com `<mask>` e assinale essa máscara para o elemento do qual você quer compôr.

### Mask-image

E por último, você pode ter também o `mask-image`, onde você determina no css a forma base que vai compôr com a imagem, lembra bastante o `clip-path`. Abaixo segue um exemplo:

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="jYjEXp" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/willianjusten/pen/jYjEXp">
  </a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Como você pode ver, nós temos a `img` que vai conter a imagem que nós queremos mostrar e no css nós definimos o `mask-image` que é a forma/ícone onde vamos inserir a imagem. Temos as seguintes linhas de código:

```css
.object-mask {
  mask-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Logo_of_Unsplash.svg);
  mask-repeat: no-repeat;
  mask-size: 350px;
  mask-position: center;
}
```

Como podemos ver acima, esse `mask-image` lembra muito com as propriedades de um `background-image`, onde determinamos se vai repetir ou não, seu tamanho e sua posição.

## Momento Jabá

Brincadeiras a parte, se você se embolou um pouquinho com SVG ou se interessou em saber mais sobre, meu [curso de SVG do início ao avançado](https://www.youtube.com/watch?v=VNTmT1qMgp0&list=PLlAbYrWSYTiOufRJOeP73o4GR9N1afQdP2) está de graça no YouTube!

## Conclusão

Bom galera, espero que tenham curtido o post e agora possam utilizar esse efeito em seus sites com bastante criatividade! Para ajudá-los, vou deixar aqui abaixo mais alguns posts/exemplos, assim vocês podem pegar mais ideias e se você fizer algo, deixa nos comentários!

- [Masking vs. Clipping: When to Use Each](https://css-tricks.com/masking-vs-clipping-use/)
- [Pen utilizando vídeo](https://codepen.io/daviddarnes/pen/vEjMLr)
- [Pen com Vídeo no Hero](https://codepen.io/estevanmaito/pen/RamBKE)
- [Pen com clip-path e fundo interativo](https://codepen.io/mhotovec/pen/WZWxKg)
- [Pen com animações na mask](https://codepen.io/celli/pen/bExxQy)
- [Página 404 com canvas + svg](https://codepen.io/tmrDevelops/pen/aNGKzN)


Dois efeitos simples que podem transformar seu site com estilo.

Mask e Clip com CSS e SVG

Muitos países e cidades visitadas, nova plataforma de cursos e recordes de alunos!

Willian JustenSoftware Engineer

Chamada

Perguntas e Respostas

Conclusão