<p>Se você trabalha com o Front-End, deve saber o quanto o CSS é essencial.</p>
<p>Por mais que exista frameworks CSS como <a href="http://getbootstrap.com/">Bootstrap</a>, <a href="http://materializecss.com/">Materialize</a>, <a href="https://material.io/guidelines/">Material Design</a> e etc, sempre tem aquela parte em que o designer precisa de uma alteração, e ter que alterar todo um <code>.css</code> apenas por conta de uma cor que não foi autorizada pelo time de designers, as vezes acaba sendo um parto para nós desenvolvedores, não é mesmo?</p>
<p>É por conta disse que surgiu algo chamado <strong>Pré-Processadores CSS</strong></p>
<h3 id="o-que-são-pré-processadores-css"><a href="#o-que-s%C3%A3o-pr%C3%A9-processadores-css" class="anchor">O que são Pré-Processadores CSS?</a></h3>
<p>Segundo um artigo do <a href="https://tableless.com.br/authors/diego-eis/">Diego Eis</a> no <a href="https://tableless.com.br/estruturacao-de-client-side-preprocessadores-framewoks-e-bibliotecas-parte-1/?utm_source=tablelessRelatedLink">Tablelees</a>:</p>
<blockquote>
<p>Pré-Processadores são ferramentas onde você escreve CSS de uma determinada forma, modificando sua sintaxe, fazendo com que na hora de sua utilização o código CSS precise ser préprocessado para que o código escrito seja transformado em código CSS puro e assim então os browsers consigam entender.</p>
</blockquote>
<p>E é exatamente isso que vamos aprender utilizando o <strong><a href="http://stylus-lang.com/">Stylus</a></strong></p>
<h3 id="instalação"><a href="#instala%C3%A7%C3%A3o" class="anchor">Instalação</a></h3>
<p>Não tem choro, para instalar será necessário ter em sua máquina o <a href="https://nodejs.org/en/">Nodejs</a>.</p>
<pre><code class="language-bash">$ npm install stylus -g
</code></pre>
<h3 id="estrutura"><a href="#estrutura" class="anchor">Estrutura</a></h3>
<p>Crie uma pasta com o nome que desejar e dentro dessas pastas crie mais 2: <code>stylus</code> e <code>css</code>. Depois crie um arquivo <code>main.styl</code> e a estrutura ficará assim.</p>
<pre><code>.
├── /css
└── /stylus
   └── main.styl
</code></pre>
<h3 id="começa-a-brincadeira"><a href="#come%C3%A7a-a-brincadeira" class="anchor">Começa a brincadeira</a></h3>
<p>Diferente de <code>SASS</code> ou do <code>LESS</code> o <strong>Stylus</strong> te deixa a vontade em relação a sintaxes. Veja que abaixo temos 3 tipos diferentes de sintaxes:</p>
<pre><code class="language-css">body {
  color: #fff;
}
maincolor#fff
div
  color: #fff;
</code></pre>
<p>Basta ir em seu terminal e rodar:</p>
<pre><code class="language-bash">stylus stylus/main.styl --out css/
</code></pre>
<p>E você verá que na pasta <code>css</code> surgiu um arquivo <code>main.css</code> assim:</p>
<pre><code class="language-css">body {
  color: #fff;
}
main {
  color: #fff;
}
div {
  color: #fff;
}
</code></pre>
<p>Não, não é magia!</p>
<p>Isso é um <strong>Pré-Processador CSS</strong> em ação!</p>
<p>Muito legal, não? Mas, para que serve? Apenas para não precisar escrever <code>{</code> ou <code>:</code>?</p>
<p>Não pequeno padawan, ele vai muito além disto e vou mostrar algumas funcionalidades.</p>
<h3 id="variáveis"><a href="#vari%C3%A1veis" class="anchor">Variáveis</a></h3>
<p>Digamos que você criou um site que em várias classes utilizou a cor <code>#fb8c00</code>, pois essa é a cor principal.</p>
<p>Depois de um tempo, o designer ou seu cliente viu que seria melhor trocar a cor Laranja (#fb8c00) para azul (#1976d2) como cor principal da página.</p>
<p><strong>O que fazer?</strong></p>
<p>Essa é fácil Douglas, o famoso <code>Ctrl H</code> (atalho para substituir) em seu Editor, procurar <code>#fb8c00</code> e substituir para <code>#1976d2</code>.</p>
<p>Mas o site tem dezenas de arquivos em <code>CSS</code>, olha o trabalho que terá para verificar e substituir em cada arquivo.</p>
<p>Com um Pré-processador como o Stylus, não será necessário, basta criar uma variável.</p>
<pre><code class="language-css">mainColor = #1976d2 body {
  color: mainColor;
}
maincolormainColor
div
  color: mainColor;
</code></pre>
<p>Pronto, agora execute o comando para compilar o Stylus e veja. Todas as classes estão com <code>color: #1976d2</code>.</p>
<p>Amanhã se precisar mudar a cor principal do site novamente, só será necessário mudar esta variável.</p>
<h3 id="importar"><a href="#importar" class="anchor">Importar</a></h3>
<p>Para deixar nosso site mais organizado, criamos um arquivo CSS para estilizar cada componente, por exemplo, um para o css do cabecalho, um css do corpo, um css do rodapé, entre outros.</p>
<p>Mas nisso teriamos que ficar importando todos <code>.css</code> no <code>&#x3C;head></code> do nosso <code>index.html</code>. Horrivel né?</p>
<p>Como faríamos no Stylus?</p>
<p>Simples, vamos criar mais 2 arquivos: <code>_variables.styl</code> e <code>_layout.styl</code></p>
<ul>
<li><code>_variables.styl</code></li>
</ul>
<pre><code class="language-css">mainColor = #1976d2
</code></pre>
<ul>
<li><code>_layout.styl</code></li>
</ul>
<pre><code class="language-css">body {
  color: mainColor;
}
maincolormainColor
div
  color: mainColor;
</code></pre>
<p>Agora editamos o arquivo <code>main.styl</code> colocando os imports.</p>
<pre><code class="language-css">@import "_variables" @import "_layout";
</code></pre>
<p>Pronto, agora para qualquer componente do site, basta colocar o <code>@import "component"</code> e já será compilado para nosso <code>main.css</code>.</p>
<h3 id="parentroot-reference"><a href="#parentroot-reference" class="anchor">Parent/Root Reference</a></h3>
<p>Em alguns momentos, precisamos utilizar o famoso modo <code>cascata</code> para referenciar o seletor pai.</p>
<p>Por exemplo, temos a classe <code>.header</code> terá uma <code>padding: 40px</code> e também terá uma classe filha <code>.title</code> que terá a cor alterada para nossa cor principal.</p>
<p>Se você entende de CSS, sabe que isso é moleza.</p>
<pre><code class="language-css">.header {
  padding: 40px;
}

.header .title {
  color: #1976d2;
}
</code></pre>
<p>Fácil né? Agora imagina ter que mudar o CSS de um <code>&#x3C;span></code> que está dentro de uma <code>&#x3C;li></code>, que está dentro de uma <code>&#x3C;ul></code>, que esta dentro de uma... ahhhh, chega. rsrs.</p>
<p>Aí complica, não é verdade?</p>
<p>Se você gosta de identar seu código, não terá problemas nenhum com isso.</p>
<p>Olha como o exemplo acima ficaria no Stylus:</p>
<pre><code class="language-css">.headerpadding 40px .title color: mainColor;
</code></pre>
<p>Basta deixar a classe filha identada como se estivesse dentro da classe pai e compilar com o <code>stylus stylus/main.styl --out css/</code> para ver a mágica acontecer.</p>
<p>Por falar em mágica, toda vez que alterar algo vamos ter que rodar o Stylus no terminal?
Claro que não né! Vamos mudar o nosso modo de compilar acrescentando o <code>--watch</code> após o <code>stylus</code></p>
<pre><code class="language-bash">stylus --watch stylus/main.styl --out css/
</code></pre>
<p>Desta forma, o <strong>Stylus</strong> ficará observando nosso código. Toda vez que mudarmos algo, ele saberá e com isso irá compilar automaticamente.</p>
<h3 id="loop"><a href="#loop" class="anchor">Loop</a></h3>
<p><strong>Loop</strong>? Você disse <strong>Loop</strong>?</p>
<p>Sim, caros amigos, loop.</p>
<p>Digamos que para não ser repetitivo o mesmo layout das páginas, você queira mudar um detalhe com outra cor para cada página.</p>
<p>Nisto entraria o famoso <code>Ctrl C</code> <code>Ctrl V</code> com alteração apenas nos nomes de classe e nas cores que deseja mudar.</p>
<p>E se você tem 5 páginas? Olha o trabalho que terá. Mas com Stylus, isso não é problema. (Leia como se fosse aqueles comerciais da Polishop rs)</p>
<p>Vamos ao código.</p>
<p>Primeiro criamos como se fosse um objeto em javascript.</p>
<pre><code class="language-css">themes = {
    page-home: #ffff00,
    page-a: #B31917,
    page-b: #1565c0,
    page-c: #e040fb,
    page-d: #1de9b6
}
</code></pre>
<p>Depois fazemos o <code>for</code>:</p>
<pre><code class="language-css">for theme, page-color in themes
</code></pre>
<p>Onde <code>theme</code> será nossa chave e <code>page-color</code> nossa variavel onde colocamos a cor.</p>
<p>Abaixo do for, criamos nossas classes com o layout das nossas páginas.</p>
<p>Então nosso código inteiro ficaria assim:</p>
<pre><code class="language-css">themes = {
    page-home: #ffff00,
    page-a: #B31917,
    page-b: #1565c0,
    page-c: #e040fb,
    page-d: #1de9b6
}

for theme, page-color in themes
    .{theme}
        h1,h2,h3,h4, strong
            color page-color
        .post-title, .title-page, .page
            color page-color
        .post-content
            a
                &#x26;:hover
                    color page-color
                    border-bottom: 2px dashed page-color
            blockquote
                border-left rem(5px) solid page-color
        .tags a
            color page-color
            border 1px solid page-color
</code></pre>
<p>Nosso main.css será transformado nisso:</p>
<pre><code class="language-css">.page-home h1,
.page-home h2,
.page-home h3,
.page-home h4,
.page-home strong {
  color: #ff0;
}
.page-home .post-title,
.page-home .title-page,
.page-home .page {
  color: #ff0;
}
.page-home .post-content a:hover {
  color: #ff0;
  border-bottom: 2px dashed #ff0;
}
.page-home .post-content blockquote {
  border-left: rem(5px) solid #ff0;
}
.page-home .tags a {
  color: #ff0;
  border: 1px solid #ff0;
}
.page-a h1,
.page-a h2,
.page-a h3,
.page-a h4,
.page-a strong {
  color: #b31917;
}
.page-a .post-title,
.page-a .title-page,
.page-a .page {
  color: #b31917;
}
.page-a .post-content a:hover {
  color: #b31917;
  border-bottom: 2px dashed #b31917;
}
.page-a .post-content blockquote {
  border-left: rem(5px) solid #b31917;
}
.page-a .tags a {
  color: #b31917;
  border: 1px solid #b31917;
}
.page-b h1,
.page-b h2,
.page-b h3,
.page-b h4,
.page-b strong {
  color: #1565c0;
}
.page-b .post-title,
.page-b .title-page,
.page-b .page {
  color: #1565c0;
}
.page-b .post-content a:hover {
  color: #1565c0;
  border-bottom: 2px dashed #1565c0;
}
.page-b .post-content blockquote {
  border-left: rem(5px) solid #1565c0;
}
.page-b .tags a {
  color: #1565c0;
  border: 1px solid #1565c0;
}
.page-c h1,
.page-c h2,
.page-c h3,
.page-c h4,
.page-c strong {
  color: #e040fb;
}
.page-c .post-title,
.page-c .title-page,
.page-c .page {
  color: #e040fb;
}
.page-c .post-content a:hover {
  color: #e040fb;
  border-bottom: 2px dashed #e040fb;
}
.page-c .post-content blockquote {
  border-left: rem(5px) solid #e040fb;
}
.page-c .tags a {
  color: #e040fb;
  border: 1px solid #e040fb;
}
.page-d h1,
.page-d h2,
.page-d h3,
.page-d h4,
.page-d strong {
  color: #1de9b6;
}
.page-d .post-title,
.page-d .title-page,
.page-d .page {
  color: #1de9b6;
}
.page-d .post-content a:hover {
  color: #1de9b6;
  border-bottom: 2px dashed #1de9b6;
}
.page-d .post-content blockquote {
  border-left: rem(5px) solid #1de9b6;
}
.page-d .tags a {
  color: #1de9b6;
  border: 1px solid #1de9b6;
}
</code></pre>
<p>Olha só o tanto de código que deixamos de escrever e ganhamos tempo.</p>
<p>O que mais posso dizer? Apenas que o <strong>Stylus</strong> é incrível!</p>
<p>É claro, isso é apenas a ponta do Ice berg. Existem diversas coisas a mais que você pode fazer com ele.</p>
<p>Mas não vai achando que é tudo flores. É necesário saber quando deve usa-lo ou não, pois uma vez usando, seu site vira "refén".</p>
<p>Já conhecia o Stylus ou outro Pré-processador (Sass, Less)?</p>



Neste artigo não vou enrolar. Vamos colocar a mão na massa e aprender na prática a utilizar o [AXIOS](https://github.com/axios/axios).

Faremos uma página onde digitaremos um usuário [GitHub](https://github.com/) para buscar os dados na [API do GitHub](https://developer.github.com/v3/) e montaremos em nossa tela todos os repositórios deste usuário.

Vamos lá.

Crie o `index.html` já colocando o **VUE** e **AXIOS** via **CDN** mesmo.

```html
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link rel="shortcut icon" href="assets/img/ico/favicon.ico" />
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
    <script src="config/index.js"></script>
  </body>
</html>
```

Agora vamos criar o `config/index.js` para instanciar nosso VUE.

Vamos utilizar duas variáveis VUE:

- **usuario** para termos o v-bind do nosso campo texto digitado
- **github** que será nosso objeto retornado da API do GitHub

```javascript
var app = new Vue({
  el: "#app",
  data: {
    usuario: "",
    github: {},
  },
})
```

Voltamos para o `index.html` para escrevermos nosso layout.

Para deixar um pouco mais bonito nosso exemplo, vamos colocar o [Bootstrap](http://getbootstrap.com/).
Em nosso layout teremos uma `<nav>` e logo abaixo nosso `<div class="container">` para colocar o `<button>` e o campo `usuario`.

```html
<nav class="nav navbar navbar-expand-lg navbar-light bg-light center">
  <a class="navbar-brand" href="#">Vue-js + Axio</a>
</nav>
<div class="container">
  <div class="row">
    <div class="col-md-12 jumbotron">
      <form class="form-inline" v-on:submit.prevent>
        <label class="sr-only" for="userGit">Usuário</label>
        <div class="input-group mb-2 mr-sm-2">
          <div class="input-group-prepend">
            <div class="input-group-text">@</div>
          </div>
          <input
            type="text"
            class="form-control"
            id="userGit"
            v-model="usuario"
            placeholder="Usuario"
          />
        </div>
        <button
          type="submit"
          class="btn btn-primary mb-2"
          @click="buscarGit"
          :class="{'disabled':usuario.trim()==''}"
        >
          Buscar
        </button>
      </form>
    </div>
  </div>
</div>
```

Percebem que em nosso `<form>` temos um `v-on:submit.prevent` apenas para não ser chamado a função `submit` do `<form>` e atualizar a página.

Já colocamos também o `@click="buscarGit"` que será nosso método para buscar as informações na API. Usamos também um `v-bind` na nossa `class` para desabilitar o `<button>` caso usuario seja vazio.

### Axios

Nosso **axios** será a parte mais facil deste simples exemplo.

```javascript
methods: {
  buscarGit: function () {
    let api = 'https://api.github.com/users/' + this.usuario;
    vm = this;
    axios.get(api).then(function(response) {
      vm.github = response.data;
    });
  }
}
```

Agora busque um usuário e observe o cosole.

É possível ver tudo o que a API fornece. Agora terminamos nosso código mostrando os repositórios do usuário que buscamos.

```html
<div v-if="github.name">
  <div class="row jumbotron">
    <div class="col-md-6">
      <div class="avatar">
        <img :src="github.avatar_url" />
      </div>
      <div class="nickname">
        <h2>{ { github.name } }</h2>
        <h2 class="login"><small>({ { github.login } })</small></h2>
      </div>
    </div>
    <div class="col-md-6">
      <div class="pull-right well info">
        <ul>
          <li>
            <h1>{ { github.public_repos } }</h1>
            Public Repos
          </li>
          <li>
            <h1>{ { github.followers } }</h1>
            Followers
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
```

Agora basta ler a [documentação do GitHub](https://developer.github.com/v3/) e deixar a criatividade fluir.


Buscando Usuário GitHub com AXIOS

Vamos aprender na prática como fazer uma requisição AXIOS na API do GitHub.


Confesso que sempre que falavam de Blog, na minha cabeça vinha a imagem do [WordPress](https://br.wordpress.com/). Longe de mim julga-lo, já fiz diversos temas e trabalhos com esse CMS.
Porém, sempre ficava inseguro quanto sua performance por conta de plugins e etc.

Quando comecei a inspecionar alguns blog's de uns desenvolvedores que gosto, tomei um susto. Como um desenvolvedor faz um blog em html?

Comecei a pesquisar, pois não era possível um desenvolvedor fazer o famoso `Ctrl C` `Ctrl V`.

Achei o **[Jekyll](http://jekyllrb.com)** !

### Jekyll

**Jekyll** atualmente é o gerador estático com maior número de stars no gitHub. Caso queira ver a lista [clique aqui](https://www.staticgen.com/).

> Ah, mas se for só para gerar um site estático, eu uso o dreamwaver.

Ótimo, então use o dreamwaver e não me enche. Não vou tentar te convencer. (rsrs)

Brincadeiras a parte, vou deixar aqui um artigo do **Willian Justen** [Por que usar jekyll ?](https://willianjusten.com.br/por-que-usar-jekyll/)

### Instalação

O Jekyll é feito em **Ruby** então você terá que instala-lo antes. Como uso **Linux**, não tive problemas com isso.

Agora, se você usa **Windows**, toma vergonha na cara! (rs). Mas para não dizer que sou mal, leia isso [Jekyll Windows - Juthilo](http://jekyll-windows.juthilo.com/).

Na própria [documentação](https://jekyllrb.com/) mostra o quanto é simples instala-lo.

Em seu terminal, rode:

```bash
gem install jekyll bundler #instala o Jekyll
jekyll new meu-site #Inicia um novo site
cd meu-site
bundle exec jekyll serve #Rodando sua aplicação no ambiente de desenvolvimento
```

### Estrutura de pastas

- **\_includes**: São partes do site que será repetido em todo site. Como por exemplo: **footer**, **navbar**, **header**.
- **\_layouts**: Precisa explicar? Arquivos para estrutura básica do site. Basicamente 3 tipos:
  - **default**: Página inicial ou listagem dos posts.
  - **page**: Páginas do seu site.
  - **post**: Página de posts.
- **\_posts**: Será onde você colocará arquivo contendo seus artigos. O padrão arquivo é MarkDown (`md`). O nome desse arquivo deve ser `YYYY-mm-dd-titulo-do-post.md`
- **\_sass**: Caso use `SASS`, coloque seus arquivos nesta pasta e o próprio **Jekyll** compilará para você.
- **css**: Pasta que irá os arquivos `SASS` após compilar.
- **\_config.yml**: Arquivo de configuração do seu Blog/Site.
- **index.html**: A página inicial do seu blog.
- **about.md**: O Jekyll irá criar uma pagina `about` de acordo com o layout do arquivo `_layouts/page`.
- **feed.xml**: Arquivo para gerar o Feed do seu Blog/site.

### Subindo seu Blog/site

Já aprendemos sobre a estrutura de pastas. Como somos "bons programadores" e muito criativos, criar layouts em **HTML5** e **CSS3** não foi problema.
Chegou a hora de colocarmos em produção.
Existem 2 formas de subirmos. A primeira e mais utilizadas pelos desenvolvedores é utilizando o Github Pages como hospedagem. Basta dar seu `git push` para o git fazer o **deploy**. Não vou explicar sobre o Github Pages, mas para ajudar leia este artigo: [Dominio proprio no Github Pages](https://willianjusten.com.br/dominio-proprio-no-github-pages/)

A segunda forma é dar o comando em seu terminal `bundle exec jekyll build`. Você notará que surgirá uma pasta **\_site**. Basta copiar todos arquivos e subir para seu servidor.

Pronto, seu blog está em produção. Simples assim.



Conhecendo Jekyll

Problemas com plugins do WordPress NUNCA MAIS. Jekyll, o melhor gerador de site estático feito para desenvolvedores.