<h2 id="introdução"><a href="#introdu%C3%A7%C3%A3o" class="anchor">Introdução</a></h2>
<p>Fala pessoal, resolvi voltar a postar os links que mais curti durante a semana. Vale lembrar que a ideia aqui, não é de mostrar as últimas novidades e sim, links que eu precisei ou li durante a semana. Assim eu compartilho um pouco do que tenho visto/estudado na semana. Sem mais delongas, aqui vão os links e se você achou algum muito legal na semana, comenta aí embaixo, vai ser bem legal saber.</p>
<h2 id="javascript"><a href="#javascript" class="anchor">JavaScript</a></h2>
<ul>
<li><a href="http://facebook.github.io/react/blog/2015/10/07/react-v0.14.html">Lançamento no React 0.14</a></li>
<li><a href="https://github.com/relax/relax">Relax - um CMS usando React e Node</a></li>
<li><a href="https://github.com/wayfair/tungstenjs">TungstenJS - modular framework for creating web UIs with high-performance rendering on both server and client</a></li>
<li><a href="http://www.sitepoint.com/promises-in-javascript-unit-tests-the-definitive-guide/">Promises in JavaScript Unit Tests: the Definitive Guide</a></li>
<li><a href="http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html">Full-Stack Redux Tutorial</a></li>
<li><a href="https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95">10 Interview Questions Every JavaScript Developer Should Know</a></li>
<li><a href="https://yabwe.github.io/medium-editor/">Novo site para o Medium Editor</a></li>
<li><a href="https://medium.com/@c2c/nodejs-a-quick-optimization-advice-7353b820c92e">#NodeJS : A quick optimization advice</a></li>
<li><a href="https://www.npmjs.com/package/nanoflux">Nanoflux is a very lightweight agnostic full Flux implementation.</a></li>
<li><a href="https://codewords.recurse.com/issues/four/lazy-composable-and-modular-javascript">Lazy, composable, and modular JavaScript</a></li>
<li><a href="http://verlok.github.io/lazyload/">Lazyload</a></li>
<li><a href="https://0x2a.sh/from-rest-to-graphql-b4e95e94c26b">From Rest to GraphQL</a></li>
<li><a href="https://ericdouglas.github.io/2015/09/27/checklist-for-your-new-open-source-javascript-project/">Checklist for your new Open Source JavaScript Project</a></li>
</ul>
<h2 id="python"><a href="#python" class="anchor">Python</a></h2>
<ul>
<li><a href="https://pythonpedia.com/">Python Pedia - Python Programming Resources.</a></li>
<li><a href="http://masteringdjango.com/testing-in-django/">Testing in Django</a></li>
<li><a href="http://blog.disqus.com/post/62187806135/scaling-django-to-8-billion-page-views">Scaling Django to 8 Billion Page Views</a></li>
</ul>
<h2 id="css"><a href="#css" class="anchor">CSS</a></h2>
<ul>
<li><a href="https://seesparkbox.com/foundry/why_you_need_to_refactor_your_css">Why You Need to Refactor Your CSS</a></li>
<li><a href="https://glenmaddern.com/articles/css-modules">CSS Modules</a></li>
</ul>
<h2 id="workflow"><a href="#workflow" class="anchor">Workflow</a></h2>
<ul>
<li><a href="https://medium.com/javascript-scene/what-every-unit-test-needs-f6cd34d9836d">5 Questions Every Unit Test Must Answer</a></li>
<li><a href="https://medium.com/brasil/como-fazer-listas-ajudou-na-minha-produtividade-83ab9bbfc6d5">Como fazer listas ajudou na minha produtividade</a></li>
</ul>
<h2 id="open-source"><a href="#open-source" class="anchor">Open Source</a></h2>
<ul>
<li><a href="https://github.com/open-source-society/computer-science">Open Source Society University</a></li>
<li><a href="https://nylas.com/">N1 - Extensible opensource Mail Client</a></li>
<li><a href="https://clipboardjs.com/">Clipboard JS</a></li>
<li><a href="https://www.ampproject.org/">Accelerated Mobile Pages Project</a></li>
</ul>
<h2 id="variados"><a href="#variados" class="anchor">Variados</a></h2>
<ul>
<li><a href="https://medium.com/humans-create-software/software-needs-to-be-better-funfunfunction-1-411942de9768">Software needs to be better — FunFunFunction #1</a></li>
<li><a href="https://code.facebook.com/posts/496171527213781/inside-scale-2015/">Scale 2015</a></li>
<li><a href="https://atavistinsider.atavist.com/goodbye-native-mobile-apps/">Goodbye, Native Mobile Apps</a></li>
<li><a href="https://medium.com/javascript-scene/inside-the-dev-team-death-spiral-6a7ea255467b">Inside the Dev Team Death Spiral</a></li>
<li><a href="http://zurb.com/article/1409/introducing-the-new-motion-ui">Introducing the New Motion UI by Zurb</a></li>
<li><a href="http://greensock.com/morphSVG">MorphSVGPlugin</a></li>
</ul>


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

Links da semana #4


## Introdução

Tentando seguir o padrão de lançar todo Domingo os links que li pela semana, aqui vão os links que eu li nessa semana. Eu ouvi várias coisas durante a semana enquanto mostrava essa lista que foram:

- [Supercombo](https://open.spotify.com/artist/73HkjgziMO6I83vFOS8mo1) - banda brasileira de indie, calma e bem legal.
- [Anavitória](https://open.spotify.com/artist/1sPg5EHuQXTMElpZ4iUgXe) - dupla brasileira com voz bem fofinha <3
- [Anathema](https://open.spotify.com/artist/0ZXKT0FCsLWkSLCjoBJgBX) - banda natural de liverpool, tem duas músicas incríveis que adoro que são [Untouchable Pt.1](https://open.spotify.com/track/7uMlAgdCGMnxaRfRlZZWDs) e [Untouchable Pt.2](https://open.spotify.com/track/3w3hBA9IiyioNpvcxZSJQL).
- [Amarante](https://open.spotify.com/artist/3yR3HP47svRNUefemTZAAc) - conheci essa banda nesse [vídeo](https://www.youtube.com/watch?v=eRvk5UQY1Js&spfreload=10) e desde então sou apaixonado.

Bom, a listinha de músicas dessa semana foi de bastante calmaria, mas não deixei de pegar vários links novos, que seguem:

## Javascript

- [ES6 Interactive Guide](http://projects.formidablelabs.com/es6-interactive-guide/#/)
- [The Refactoring Tales](http://javascriptplayground.com/the-refactoring-tales/refactoring-tales.html)
- [Sri (Scala React interface) - Build truly native cross platform](https://github.com/chandu0101/sri)
- [The Future of Web Development - React, Falcor, and ES6](http://engineering.widen.com/blog/future-of-the-web-react-falcor/)
- [How To Write a Pacman Game in JavaScript](http://www.masswerk.at/JavaPac/pacman-howto.html)
- [Integrating React with gulp](https://jonsuh.com/blog/integrating-react-with-gulp/)
- [A cartoon guide to Flux](https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207)
- [ES6 in Depth](https://ponyfoo.com/articles/tagged/es6-in-depth)
- [A Responsive Material Design App With Polymer Starter Kit](http://www.smashingmagazine.com/2015/10/responsive-material-design-app-with-polymer-starter-kit/)
- [Screamer.JS - create customisable Web Notifications](https://github.com/willianjusten/screamer-js/)
- [React+Flux can do in just 137 lines what jQuery can do in 10](http://swizec.com/blog/reactflux-can-do-in-just-137-lines-what-jquery-can-do-in-10/swizec/6740)

## CSS / SVG

- [Understanding and Using rem Units in CSS](http://www.sitepoint.com/understanding-and-using-rem-units-in-css/)
- [Using Web Fonts the Best Way (in 2015).](https://helloanselm.com/2015/using-webfonts-in-2015/)
- [CodePen's CSS](http://codepen.io/chriscoyier/post/codepens-css)
- [Um lego feito em CSS puro - LOUCO](http://codepen.io/rachel_web/pen/rOLRvM/)
- [CodePen Challenge #5: Spooky Halloween SVG Characters](http://codepen.io/collection/nJGmgJ/)
- [Effect Ideas for Image Grids](http://tympanus.net/codrops/2015/10/15/effect-ideas-for-image-grids/)

## Opensource

- [Exposé - A simple static site generator for photoessays](https://github.com/Jack000/Expose)
- [The official Javascript client for Cosmic JS](https://github.com/cosmicjs/cosmicjs-node)

## Design

- [25 Luxury Website Designs with Elegant Layouts](http://line25.com/inspiration/luxury-website-designs)
- [What’s New for Designers, October 2015](https://webdesignerdepot.com/2015/10/whats-new-for-designers-october-2015/)
- [A collection of free resources made by designers at Facebook.](https://facebook.design)
- [Every website looks the same, and that’s ok](https://medium.com/@WebdesignerDepot/every-website-looks-the-same-and-that-s-ok-36c32bd8a1dd)
- [Design to Code with Atomic Design Principles and Sketch](https://medium.com/re-write/the-unicorn-workflow-design-to-code-with-atomic-design-principles-and-sketch-8b0fe7d05a37)
- [Um site simplesmente foda](http://keepearthquakesweird.com/)

## Variados

- [What's the Fuss with Google's Accelerated Mobile Pages (AMP)?](https://auth0.com/blog/2015/10/12/whats-the-fuss-with-googles-accelerated-mobile-pages-amp/)
- [Performance Budget - Calcule o que gastar em seu site](http://www.performancebudget.io/)
- [Writing Developer Job Postings](http://www.tokyodev.com/2015/08/28/writing-developer-job-posting/)
- [Teste seu site no Http2](http://http2.loadimpact.com/)
- [Hybrid Mobile Apps With Couchbase And Ionic Framework](http://blog.couchbase.com/hybrid-mobile-apps-with-couchbase-and-ionic-framework)
- [O lado ruim de trabalhar no Google em 23 frases](http://exame.abril.com.br/carreira/noticias/o-lado-ruim-de-trabalhar-no-google-em-23-frases/lista)
- [Github Classroom](https://classroom.github.com/)
- [A source control backed CMS for developers working with non-developers](http://cloudcannon.com/)
- [Detox - Replace your Facebook feed with something positively distracting.](http://usedetox.com/)
- [Front-end Developer Handbook](https://frontendmasters.gitbooks.io/front-end-handbook/content/index.html)


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

Links da semana #5


## Introdução

Estou aproveitando que estou descendo a serra e vou iniciar mais um post, não sei se vou ter paciência para terminar, mas vamos lá. No momento estou ouvindo Radiohead, mais especificamente o cd The Bends, que é um dos meus favoritos.

Nesse post eu vou mostrar uma das paradas mais legais de todas do SVG, que é a técnica de Line Drawing, mais famosa como "aquele efeito louco de desenhar na tela". Essa é uma técnica bastante simples, mas que pode ser utilizada de diversas formas e permite criar vários tipos de interação e usabilidade.

Se você não sabe que efeito é esse, dá uma olhadinha nessa [coleção do codepen](http://codepen.io/collection/cEust/10/).

## Contornos

Se pararmos para pensar, todo desenho começa a partir de um contorno e depois colorimos as formas criadas. Então, para criarmos esse efeito de "desenhar" basta manipularmos o contorno, que no nosso SVG é a propriedade `stroke`.

## Stroke-dasharray e Stroke-dashoffset

A propriedade `stroke-dasharray` permite você determinar qual vai ser o tamanho do traço no contorno e o espaço entre um traço e outro. Exemplo:

```css
path {
  stroke-dasharray: 10;
}
```

Isso significa que cada traço no desenho terá um tamanho de 10 e um espaço de 10 para o próximo traço.

Já a propriedade `stroke-dashoffset` permite mudar onde o `stroke-dasharray` vai começar e terminar.

Então para o efeito acontecer, basta que eu determine que o `stroke-dasharray` seja o tamanho máximo do elemento e fazer com que o `stroke-dashoffset` vá diminuindo do tamanho máximo até zero. Assim teríamos:

#### Passo 1

```css
inicio {
  stroke-dasharray: 'tamanho do desenho';
  stroke-dashoffset: 'tamanho do desenho';
}
```

Aqui, como determinamos que o `stroke-dashoffset` é o tamanho do desenho, ele empurra todo o traço e não enxergamos nada na tela.

#### Passo 2

```css
final {
  stroke-dashoffset: 0;
}
```

Nesse passo, dizemos que o traço deve começar do ponto zero do mesmo e como dizemos que o `stroke-dasharray` tem o tamanho todo, vemos claramente todo o contorno.

Mas vamos parar de falar teoria e vamos para a prática:

## Criando o Efeito de Desenhar

### 1 - Baixando um SVG ou criando um.

Para esse primeiro exemplo, eu resolvi criar um bem simples, que nada mais é que escrever "Hello" na tela. Minha letra é uma bosta, então releve, por favor, depois faça com sua assinatura ou qualquer coisa e manda nos comentários =)

Eu fiz o desenho no Illustrator, mas ele também pode ser feito no Inkscape, Sketch e outros editores de SVG.

![Imagem mostrando um Hello escrito no Illustrator](/assets/img/draw-svg/hello.png)

### 2 - Otimizando o SVG

Sempre que baixar um SVG ou criar um, a melhor coisa a se fazer é dar uma otimizada, isso ajuda a eliminar muita sujeira que atrapalharia até na leitura do próprio SVG. Nesses casos pontuais (só um item), aconselho muito o [SVG OMG](https://jakearchibald.github.io/svgomg/).

### 3 - Inserindo o SVG na página

Basta copiar o código gerado e colar inline no seu html. Aproveite e defina uma classe para o SVG, no caso, eu coloquei `class="hello"`.

```html
<svg class="hello" width="230.3px" height="155.9px" viewBox="0 0 230.3 155.9">
  <path
    fill="none"
    stroke="#000000"
    stroke-miterlimit="10"
    d="M0.5,0.2c2.2,5.8,0.7,12,0.9,18.2C2,33.2,4.9,48.5,7,63.2
        c2.2,15.4,5.8,30.3,7.4,45.7c1.3,13.2,0.4,29.8,4.7,42c-0.3-16.9-3.1-48.5,19.5-49.6c21.2-1,11.1,25.8,23.1,37.2
        c28.4,27,66.2-29,34.8-38.2c-7.2,17.2-5.8,50.6,21.5,44.5c14.1-3.2,20.7-26.4,22.9-39.2c1.3-7.5,12.1-75.8,1-73.9
        c-12.1,2.1-15.8,45.5-16.3,54.4c-0.8,14.8,1.3,26.9,6.8,40.2c4.6,11,6.9,19.4,19.3,20.7c14.3,1.6,21.8-11.7,27.2-24
        c8.4-19.3,6.5-43,6.5-64c0-7.3-4.1-27-13-15.4c-4.3,5.6-4.1,23.6-4.4,30.7c-0.5,11.9-1.1,24.4,2.4,35.7c5,15.9,14.8,31.2,30.1,38.3
        c7.9,3.7,19.4,7.5,25.9-0.5c3.6-4.4,4.6-23.3,2.2-28.6c-5.5-12.5-25-10.9-29.4,1.6c-5.2,14.8,1.6,25.3,9,34.8"
  />
</svg>
```

### 4 - Descobrindo o tamanho total do path

Para que possamos fazer o truque de desenhar, precisamos saber o tamanho do path para definir em nosso `stroke-dasharray` e `stroke-dashoffset`. Para isso, basta usarmos um método do Javascript. No próprio console do seu devTools, faça:

```js
var draw = document.querySelector('.hello path')
console.log(draw.getTotalLength())
```

No meu caso, o resultado foi de `1044.4212646484375`.

### 5 - Criando a animação

Depois de tudo ali em cima, agora fica bem fácil de fazer essa animação. Primeiro vamos definir para a nossa classe `hello`, o seu tamanho máximo e uma largura para o traço.

```css
.hello {
  stroke-width: 3px;
  stroke-dasharray: 1045; // numero arrendoda do tamanho
}
```

Depois disso, vamos criar a animação em css usando `@keyframes`, se você não conhece ainda, dá uma lidinha no [site da MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes), lá eles falam bastante sobre. Mas o que você precisa saber é que através dos keyframes a gente consegue definir estados da animação, seja "de-para" (from-to) até o uso de porcentagens de um tempo. Para o nosso caso, faremos aquela jogadinha dos `strokes`.

```css
// write é o nome da nossa animação
@keyframes write {
  0% {
    stroke-dashoffset: 1045; // tamanho inicial
  }
  100% {
    stroke-dashoffset: 0; // tamanho final
  }
}
```

Feito isso, basta definirmos essa animação lá na nossa classe `hello`:

```css
.hello {
  stroke-width: 3px;
  stroke-dasharray: 1045; // numero arrendoda do tamanho
  animation: 6s write; // quanto menor, mais rápido
}
```

Prontinho, temos nossa animação feita!! Segue abaixo o exemplo criado, para ver a animação é só clicar em "Rerun" ali no canto inferior direito:

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

## Desenhando e preenchendo

Junto a essa brincadeira de desenhar, podemos além de só desenhar o contorno, podemos também pintar as coisas. Segue um exemplo simples feito com a logo do Python, que baixei no [SVG Porn](http://svgporn.com/). Lembre de clicar no "Rerun" caso a animação já tenha acontecido:

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="epvovO" 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/epvovO">
  </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 esse exemplo, utilizei 3 pontos no `keyframe` para poder pintar somente ao finalizar os traços, deixando como se fosse um efeito de montar a logo. Para que desse uma suavizada das cores, eu usei a propriedade `fill-opacity`, que é bastante similar a propriedade `opacity` do css, porém que funciona só nos preenchimentos.

## Desenhando com Scroll

Outro efeito legal é fazer o desenho ser criado ao scrollar a tela. Para isso precisamos de um pouquinho mais de Javascript, para que a cada scroll, a gente vá diminuindo o valor do `stroke-dashoffset` até que ele alcance o valor de zero.

Segue um exemplo:

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

Vamos prestar atenção a certos trechos do código. Primeiro precisamos verificar qual o tamanho do elemento e então definir seu `stroke-dasharray` e o `stroke-dashoffset` igual nos outros exemplos.

```js
// Seleciona o path do nosso desenho
var path = document.querySelector('path')

// Pega o tamanho total dele
var pathLength = path.getTotalLength()

// Faz com que o stroke-dasharray fique com o tamanho total
path.style.strokeDasharray = pathLength + ' ' + pathLength

// Faz com que o stroke-offset fique com o tamanho total
// Escondendo assim o desenho
path.style.strokeDashoffset = pathLength
```

Depois nós precisamos criar um evento de `scroll` e de acordo com ele, ir diminuindo o valor do `stroke-dashoffset` até 0.

```js
// Adiciona o evento de Scroll
window.addEventListener('scroll', function (e) {
  // determina a porcentagem do quanto o usuário já scrollou na tela
  var scrollPercentage =
    (document.documentElement.scrollTop + document.body.scrollTop) /
    (document.documentElement.scrollHeight -
      document.documentElement.clientHeight)

  // Determinando o tamanho do desenho pela porcentagem
  var drawLength = pathLength * scrollPercentage

  // Diminuindo o valor do offset para criar o desenho
  path.style.strokeDashoffset = pathLength - drawLength
})
```

## Conclusão

Bom, espero que tenham gostado desse post, essa é uma das animações mais legais que tem no SVG e que é praticamente exclusiva dele, visto que não conseguimos interagir com imagens e criar certos desenhos somente em CSS é quase inviável.

E se você acha que o efeito é legal, mas não saberia aplicar em seu site, seguem alguns sites que utilizam muito bem dessa técnica.

- [Garden](http://gardenestudio.com.br/)
- [Panizzon](http://panizzon.ind.br/)


Um tutorial de como fazer aquele efeito legal de desenhar elementos na tela com SVG.

#15 - Criando o efeito de desenhar com SVG

Aprenda como desenhar na tela usando SVG.

Willian JustenSoftware Engineer

Introdução

JavaScript

Python

CSS

Workflow

Open Source

Variados