<p>Fiquei um tempo sem fazer esse tipo de post, mas pretendo retorná-lo, porque links interessantes nunca são demais =)</p>
<p>Antes de liberar os vários links, vou falar de um em especial que saiu essa semana que foi o <a href="http://cyberglot.me/cem/">Infográfico de comemoração das 100 Weeklies enviadas pela BrazilJS Foundation</a> feito pela <a href="http://jugoncalv.es/">Ju Goncalves</a> e com uma ajudinha minha =)</p>
<h2 id="css"><a href="#css" class="anchor">CSS</a></h2>
<ul>
<li><a href="http://tympanus.net/codrops/2015/03/12/freebie-forkio-one-page-website-template/">Freebie: “Forkio” One Page Website Template - Codrops</a></li>
<li><a href="http://webdesign.tutsplus.com/articles/codepen-challenge-1-results--cms-23585">Codepen Challenge #1</a></li>
<li><a href="http://tympanus.net/codrops/2015/03/10/creative-gooey-effects">Creative Gooey Effects</a> - Lucas Bebber não é desse mundo, manda muito =)</li>
<li><a href="http://flickity.metafizzy.co/">Flickity - touch and responsible gallery</a></li>
<li><a href="http://tevko.github.io/practice/index.html">Practice your skills by getting random suggestions or creative inspiration!</a></li>
<li><a href="https://webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/">How to get started with css shapes</a></li>
<li><a href="https://csswizardry.com/2015/03/can-css-be-too-modular/">Can css be too modular?</a></li>
<li><a href="http://www.smashingmagazine.com/2015/03/05/automating-style-guide-driven-development/">Automating Style Guide-Driven Development</a></li>
</ul>
<h2 id="js"><a href="#js" class="anchor">JS</a></h2>
<ul>
<li><a href="https://github.com/mizchi/arda">Arda: Meta-Flux framework for real world</a></li>
<li><a href="https://github.com/Kikobeats/acho">A extremely (but powerful) simple logging system for NodeJS and browser</a></li>
<li><a href="https://github.com/codesuki/react-d3-components">React D3 Components</a></li>
<li><a href="https://zapier.com/engineering/react-js-tutorial-guide-gotchas/">React JS Tutorial and Guide to the Gotchas</a></li>
<li><a href="http://projects.formidablelabs.com/radium/">Radium - set of tools to manage inline styles on React elements.</a></li>
<li><a href="http://www.crashlytics.com/blog/building-user-interfaces-with-react/">Build User Interfaces with React</a></li>
<li><a href="http://adripofjavascript.com/blog/drips/measuring-javascript-performance-with-console-time.html">Measuring JavaScript Performance with console.time</a></li>
<li><a href="https://github.com/RickWong/react-isomorphic-starterkit">React Isomorphic Starterkit</a></li>
</ul>
<h2 id="design"><a href="#design" class="anchor">Design</a></h2>
<ul>
<li><a href="http://www.sitepoint.com/golden-rules-mobile-email-design/">5 Golden Rules For Mobile Email Design</a></li>
<li><a href="http://techcrunch.com/2015/02/27/cards-transforming-web/">How Cards Are Quietly Transforming The Web</a></li>
<li><a href="http://www.creativebloq.com/ux/how-prototype-websites-paper-31514246">How to prototype websites on paper</a></li>
<li><a href="http://defringe.com/">Defringe - a curated online gallery that filters creative content on the web</a></li>
<li><a href="http://www.lumi.com/">Lumi - Build your Brand</a></li>
<li><a href="http://astropad.com/">Arstropad - Mac &#x26; Ipad Draw Together</a></li>
</ul>
<h2 id="etc"><a href="#etc" class="anchor">Etc</a></h2>
<ul>
<li><a href="http://codeutopia.net/blog/2015/03/01/unit-testing-tdd-and-bdd/">What’s the difference between Unit Testing, TDD and BDD?</a></li>
<li><a href="http://www.creativebloq.com/career/9-tips-improving-your-time-management-31514419">9 Tips improving your time management</a></li>
<li><a href="http://www.creativebloq.com/career/10-steps-freelance-success-31514415">10 steps to freelance success</a></li>
<li><a href="https://start.me">Start.me - Personalize your start page</a></li>
<li><a href="https://medium.com/@nashvail/i-built-a-chrome-extension-to-control-my-online-time-wastage-and-it-worked-bd1168e03b01">I built a chrome extension to control my online time wastage and it worked!</a> - Ideia genial poder medir o tempo gasto nas coisas!</li>
<li><a href="http://tinychart.co/">Tinychart - Create beautiful graphics with JSON or table</a></li>
</ul>


Links da semana #3 - Links sobre coisas interessantes que fui vendo pela semana.

Links da semana #3


## Introdução

Olá galera, nesse exato momento estou escrevendo do avião, voltando para o Rio de Janeiro, depois de palestrar em Belo Horizonte. Estou tão feliz com tudo, que resolvi falar aqui, o porquê de ser tão bom ir a eventos.

Irei falar um pouco da minha experiência nessa viagem/evento e o que adquiri com isso. Prometo não fazer um post gigante, até porque a viagem é pequenina também.

## Viagem

Eu sempre falo para os meus amigos, que uma das melhores coisa da vida é viajar. Porque conhecemos coisas novas, pessoas diferentes, culturas diferentes e isso agrega bastante para nós como pessoas. Quer uma oportunidade melhor de crescer pessoalmente e ainda aprender tecnologias do que num evento?

## Amigos antigos

Dessa vez eu tive a oportunidade de viajar com o [Pedro Polisenso](http://pedropolisenso.com/) e o [Diego Ramos](https://github.com/rdiego26), dois caras fantásticos e que fizeram a viagem ainda mais divertida. Nunca tínhamos viajado juntos e foi uma oportunidade e tanto, para trocar conhecimentos, tanto na área de dev, como sobre coisas da vida também.

Lá, eu também já conhecia uma galera ([Yan Magalhães](https://twitter.com/yaanmagale), [Lucas Maia](http://twitter.com/lucasmaiaesilva), [Fernanda Feliciano](https://www.facebook.com/fernandafeliciano), [Felipe Siqueira](https://www.twitter.com/flipggs) e mais...) e com isso, já ganhei hospedagem de graça e ainda guias turísticos!! =)

## Amigos novos

Uma das melhores coisas num evento é poder conversar com gente nova e aprender com elas. Me diverti demais nos 3 dias em que fiquei em BH e conheci muiiiita gente! Pessoas que já me conheciam, até pelo blog e outras que nunca tinham ouvido falar no meu nome também. Ganhei contatos de trabalho, mais novos amigos dispostos a oferecer hospedagem free e, é claro, dispostos a sair, se divertir e estudar juntos.

Agradecimentos para [Tiago Porto](http://twitter.com/_tiagoporto), [Dayman Novaes](http://twitter.com/daymannovaes) e todos os outros, que foram mega atenciosos comigo e me mostraram vários lugares legais =)

## Conhecimento

É claro que num evento sobre programação, teremos muitos assuntos legais, coisas novas, coisas antigas e sempre em diferentes pontos de vista. E o mais importante é não deixar aquilo morrer ali, é marcar os links, pedir os slides e estudar depois!

## Injeção de ânimo

Como, em geral, o evento começa de manhã, termina no início da noite e sempre fazemos um happy hour depois, acaba sendo muito cansativo. Mas a sensação de dever cumprido, de conhecimento adquirido e de ter feitos novas amizades é sempre uma ótima injeção de ânimo. Te dizer que estou morto desses dias, mas ao mesmo tempo estou bem melhor e mais confiante de quando eu fui para BH.

## Conclusão

Acho que depois de tudo que falei, provavelmente você já deve ter se animado para ir em algum evento e esse já é um bom começo, agora procure pelos eventos que vão acontecer, tanto na sua cidade quanto em outras. Se planeje e vá! As vezes você pode ficar na dúvida e achar que está caro, mas todo esse dinheiro será bem recompensado. Costumo dizer que ir a eventos é um investimento que vale muito!


Alguns dos motivos que fazem os eventos serem tão sensacionais e que todos deveríamos ir.

Por que ir em eventos vale a pena?


## Índice da série

Tenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](https://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG.

## Introdução

Hoje resolvi que seria o dia de escutar clássicos e estou ouvindo [Pink Floyd](http://www.pinkfloyd.com/), para ser mais específico o [The Dark Side of The Moon - 2011 Remastered Version](http://open.spotify.com/album/3a0UOgDWw2pTajw85QPMiz), se quiser clica ali e segue junto =)

No [post anterior](https://willianjusten.com.br/estilizando-svg-com-css-parte-1/) eu expliquei um pouco sobre quais propriedades o SVG possui, quais ele compartilha com o CSS e quais as formas de estilizar. Hoje vou mostrar um pouco de algumas propriedades na prática.

**Nota**: irei utilizar alguns conceitos já explicados e mostrados em outros posts, então caso você se perca em alguma parte do código, dá uma olhada nos [posts anteriores](https://willianjusten.com.br/series/)

## Propriedade Fill

Como o nome diz, ela quem irá preencher a cor da forma selecionada. Uma das propriedades mais utilizadas e vai servir para dar aquele toque especial na imagem. A grande vantagem é poder preencher cada pedaço desejado da imagem.

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="azaERB" 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/azaERB">
  </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>

## Propriedade Fill-opacity

Uma variável da propriedade `fill`, onde iremos só modificar a opacidade do preenchimento naquele elemento.

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="pvOaNg" 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/pvOaNg">
  </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>

## Propriedade Stroke e Stroke-width

Essa propriedade irá alterar a cor do contorno (`stroke`) e sua espessura (`stroke-width`). Por padrão, os elementos vem sem nenhum contorno.

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="VYGQpB" 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/VYGQpB">
  </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>

## Propriedade Stroke-dasharray

O atributo `stroke-dasharray` transforma os caminhos em traços ao invés de linhas sólidas.

Com o atributo você pode especificar o tamanho do traço, assim como a distância entre eles, separados por vírgulas ou espaços.

No exemplo abaixo, temos o primeiro círculo com a propriedade `stroke-dasharray: 10`, então cada traço terá `10px` e uma distância de `10px` para o próximo traço. O segundo círculo tem a propriedade `stroke-dasharray: 10, 40`, ou seja, cada traço terá `10px` e a distância entre eles será de `40px`.

Para mostrar que podemos brincar também com interatividade no SVG, adicionei um evento ao dar `hover` no segundo círculo, para que mude a propriedade `stroke-dasharray` do mesmo.

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="KwxQqz" 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/KwxQqz">
  </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>

## Propriedade Stroke-linecap

O `stroke-linecap` define qual forma terá o final de um caminho aberto, seja ele uma `path`, `line` ou `polyline`. E aceita três valores possíveis: `butt`, `round` e `square`.

De acordo com o exemplo abaixo, podemos observar o seguinte:

- `butt`: irá cortar a ponta exatamente na sua espessura, deixando a ponta quadrada.
- `round`: irá deixar as pontas arredondas, acrescentando um "padding" nas pontas.
- `square`: irá deixar a ponta quadrada, acrescentando um "padding" nas pontas.

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="raZJYw" 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/raZJYw">
  </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>

## Propriedade Stroke-linejoin

O `stroke-linejoin` define qual aparência os cantos dos contornos irão possuir nos caminhos e formas básicas.

- `mitter`: terá o canto pontiagudo
- `round`: terá o canto arrendondado
- `bevel`: terá o canto chanfrado

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="MYqQQp" 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/MYqQQp">
  </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>

## Conclusão

Essas são as propriedades mais comuns que o SVG possui, mas olhando para elas já podemos imaginar várias brincadeiras que podemos fazer não?

No início parece um pouco complicado e inútil, mas o SVG tem um grande poder. No primeiro exemplo do fill eu mostro um gráfico de barras feito em SVG, imagina fazer bibliotecas de gráficos em SVG como o [chartist](http://gionkunz.github.io/chartist-js/)?


Aprenda quais as propriedades que o SVG possui e como trabalhar com elas.

Willian JustenSoftware Engineer

CSS

JS

Design

Etc