<p>Confesso que sempre que falavam de Blog, na minha cabeça vinha a imagem do <a href="https://br.wordpress.com/">WordPress</a>. 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.</p>
<p>Quando comecei a inspecionar alguns blog's de uns desenvolvedores que gosto, tomei um susto. Como um desenvolvedor faz um blog em html?</p>
<p>Comecei a pesquisar, pois não era possível um desenvolvedor fazer o famoso <code>Ctrl C</code> <code>Ctrl V</code>.</p>
<p>Achei o <strong><a href="http://jekyllrb.com">Jekyll</a></strong> !</p>
<h3 id="jekyll"><a href="#jekyll" class="anchor">Jekyll</a></h3>
<p><strong>Jekyll</strong> atualmente é o gerador estático com maior número de stars no gitHub. Caso queira ver a lista <a href="https://www.staticgen.com/">clique aqui</a>.</p>
<blockquote>
<p>Ah, mas se for só para gerar um site estático, eu uso o dreamwaver.</p>
</blockquote>
<p>Ótimo, então use o dreamwaver e não me enche. Não vou tentar te convencer. (rsrs)</p>
<p>Brincadeiras a parte, vou deixar aqui um artigo do <strong>Willian Justen</strong> <a href="https://willianjusten.com.br/por-que-usar-jekyll/">Por que usar jekyll ?</a></p>
<h3 id="instalação"><a href="#instala%C3%A7%C3%A3o" class="anchor">Instalação</a></h3>
<p>O Jekyll é feito em <strong>Ruby</strong> então você terá que instala-lo antes. Como uso <strong>Linux</strong>, não tive problemas com isso.</p>
<p>Agora, se você usa <strong>Windows</strong>, toma vergonha na cara! (rs). Mas para não dizer que sou mal, leia isso <a href="http://jekyll-windows.juthilo.com/">Jekyll Windows - Juthilo</a>.</p>
<p>Na própria <a href="https://jekyllrb.com/">documentação</a> mostra o quanto é simples instala-lo.</p>
<p>Em seu terminal, rode:</p>
<pre><code class="language-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
</code></pre>
<h3 id="estrutura-de-pastas"><a href="#estrutura-de-pastas" class="anchor">Estrutura de pastas</a></h3>
<ul>
<li><strong>_includes</strong>: São partes do site que será repetido em todo site. Como por exemplo: <strong>footer</strong>, <strong>navbar</strong>, <strong>header</strong>.</li>
<li><strong>_layouts</strong>: Precisa explicar? Arquivos para estrutura básica do site. Basicamente 3 tipos:
<ul>
<li><strong>default</strong>: Página inicial ou listagem dos posts.</li>
<li><strong>page</strong>: Páginas do seu site.</li>
<li><strong>post</strong>: Página de posts.</li>
</ul>
</li>
<li><strong>_posts</strong>: Será onde você colocará arquivo contendo seus artigos. O padrão arquivo é MarkDown (<code>md</code>). O nome desse arquivo deve ser <code>YYYY-mm-dd-titulo-do-post.md</code></li>
<li><strong>_sass</strong>: Caso use <code>SASS</code>, coloque seus arquivos nesta pasta e o próprio <strong>Jekyll</strong> compilará para você.</li>
<li><strong>css</strong>: Pasta que irá os arquivos <code>SASS</code> após compilar.</li>
<li><strong>_config.yml</strong>: Arquivo de configuração do seu Blog/Site.</li>
<li><strong>index.html</strong>: A página inicial do seu blog.</li>
<li><strong>about.md</strong>: O Jekyll irá criar uma pagina <code>about</code> de acordo com o layout do arquivo <code>_layouts/page</code>.</li>
<li><strong>feed.xml</strong>: Arquivo para gerar o Feed do seu Blog/site.</li>
</ul>
<h3 id="subindo-seu-blogsite"><a href="#subindo-seu-blogsite" class="anchor">Subindo seu Blog/site</a></h3>
<p>Já aprendemos sobre a estrutura de pastas. Como somos "bons programadores" e muito criativos, criar layouts em <strong>HTML5</strong> e <strong>CSS3</strong> 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 <code>git push</code> para o git fazer o <strong>deploy</strong>. Não vou explicar sobre o Github Pages, mas para ajudar leia este artigo: <a href="https://willianjusten.com.br/dominio-proprio-no-github-pages/">Dominio proprio no Github Pages</a></p>
<p>A segunda forma é dar o comando em seu terminal <code>bundle exec jekyll build</code>. Você notará que surgirá uma pasta <strong>_site</strong>. Basta copiar todos arquivos e subir para seu servidor.</p>
<p>Pronto, seu blog está em produção. Simples assim.</p>



Se você trabalha com o Front-End, deve saber o quanto o CSS é essencial.

Por mais que exista frameworks CSS como [Bootstrap](http://getbootstrap.com/), [Materialize](http://materializecss.com/), [Material Design](https://material.io/guidelines/) e etc, sempre tem aquela parte em que o designer precisa de uma alteração, e ter que alterar todo um `.css` 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?

É por conta disse que surgiu algo chamado **Pré-Processadores CSS**

### O que são Pré-Processadores CSS?

Segundo um artigo do [Diego Eis](https://tableless.com.br/authors/diego-eis/) no [Tablelees](https://tableless.com.br/estruturacao-de-client-side-preprocessadores-framewoks-e-bibliotecas-parte-1/?utm_source=tablelessRelatedLink):

> 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.

E é exatamente isso que vamos aprender utilizando o **[Stylus](http://stylus-lang.com/)**

### Instalação

Não tem choro, para instalar será necessário ter em sua máquina o [Nodejs](https://nodejs.org/en/).

```bash
$ npm install stylus -g
```

### Estrutura

Crie uma pasta com o nome que desejar e dentro dessas pastas crie mais 2: `stylus` e `css`. Depois crie um arquivo `main.styl` e a estrutura ficará assim.

```
.
├── /css
└── /stylus
   └── main.styl
```

### Começa a brincadeira

Diferente de `SASS` ou do `LESS` o **Stylus** te deixa a vontade em relação a sintaxes. Veja que abaixo temos 3 tipos diferentes de sintaxes:

```css
body {
  color: #fff;
}
maincolor#fff
div
  color: #fff;
```

Basta ir em seu terminal e rodar:

```bash
stylus stylus/main.styl --out css/
```

E você verá que na pasta `css` surgiu um arquivo `main.css` assim:

```css
body {
  color: #fff;
}
main {
  color: #fff;
}
div {
  color: #fff;
}
```

Não, não é magia!

Isso é um **Pré-Processador CSS** em ação!

Muito legal, não? Mas, para que serve? Apenas para não precisar escrever `{` ou `:`?

Não pequeno padawan, ele vai muito além disto e vou mostrar algumas funcionalidades.

### Variáveis

Digamos que você criou um site que em várias classes utilizou a cor `#fb8c00`, pois essa é a cor principal.

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.

**O que fazer?**

Essa é fácil Douglas, o famoso `Ctrl H` (atalho para substituir) em seu Editor, procurar `#fb8c00` e substituir para `#1976d2`.

Mas o site tem dezenas de arquivos em `CSS`, olha o trabalho que terá para verificar e substituir em cada arquivo.

Com um Pré-processador como o Stylus, não será necessário, basta criar uma variável.

```css
mainColor = #1976d2 body {
  color: mainColor;
}
maincolormainColor
div
  color: mainColor;
```

Pronto, agora execute o comando para compilar o Stylus e veja. Todas as classes estão com `color: #1976d2`.

Amanhã se precisar mudar a cor principal do site novamente, só será necessário mudar esta variável.

### Importar

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.

Mas nisso teriamos que ficar importando todos `.css` no `<head>` do nosso `index.html`. Horrivel né?

Como faríamos no Stylus?

Simples, vamos criar mais 2 arquivos: `_variables.styl` e `_layout.styl`

- `_variables.styl`

```css
mainColor = #1976d2
```

- `_layout.styl`

```css
body {
  color: mainColor;
}
maincolormainColor
div
  color: mainColor;
```

Agora editamos o arquivo `main.styl` colocando os imports.

```css
@import "_variables" @import "_layout";
```

Pronto, agora para qualquer componente do site, basta colocar o `@import "component"` e já será compilado para nosso `main.css`.

### Parent/Root Reference

Em alguns momentos, precisamos utilizar o famoso modo `cascata` para referenciar o seletor pai.

Por exemplo, temos a classe `.header` terá uma `padding: 40px` e também terá uma classe filha `.title` que terá a cor alterada para nossa cor principal.

Se você entende de CSS, sabe que isso é moleza.

```css
.header {
  padding: 40px;
}

.header .title {
  color: #1976d2;
}
```

Fácil né? Agora imagina ter que mudar o CSS de um `<span>` que está dentro de uma `<li>`, que está dentro de uma `<ul>`, que esta dentro de uma... ahhhh, chega. rsrs.

Aí complica, não é verdade?

Se você gosta de identar seu código, não terá problemas nenhum com isso.

Olha como o exemplo acima ficaria no Stylus:

```css
.headerpadding 40px .title color: mainColor;
```

Basta deixar a classe filha identada como se estivesse dentro da classe pai e compilar com o `stylus stylus/main.styl --out css/` para ver a mágica acontecer.

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 `--watch` após o `stylus`

```bash
stylus --watch stylus/main.styl --out css/
```

Desta forma, o **Stylus** ficará observando nosso código. Toda vez que mudarmos algo, ele saberá e com isso irá compilar automaticamente.

### Loop

**Loop**? Você disse **Loop**?

Sim, caros amigos, loop.

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.

Nisto entraria o famoso `Ctrl C` `Ctrl V` com alteração apenas nos nomes de classe e nas cores que deseja mudar.

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)

Vamos ao código.

Primeiro criamos como se fosse um objeto em javascript.

```css
themes = {
    page-home: #ffff00,
    page-a: #B31917,
    page-b: #1565c0,
    page-c: #e040fb,
    page-d: #1de9b6
}
```

Depois fazemos o `for`:

```css
for theme, page-color in themes
```

Onde `theme` será nossa chave e `page-color` nossa variavel onde colocamos a cor.

Abaixo do for, criamos nossas classes com o layout das nossas páginas.

Então nosso código inteiro ficaria assim:

```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
                &: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
```

Nosso main.css será transformado nisso:

```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;
}
```

Olha só o tanto de código que deixamos de escrever e ganhamos tempo.

O que mais posso dizer? Apenas que o **Stylus** é incrível!

É claro, isso é apenas a ponta do Ice berg. Existem diversas coisas a mais que você pode fazer com ele.

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".

Já conhecia o Stylus ou outro Pré-processador (Sass, Less)?



Colocando Stylus no seu Site

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


Por mais root que seja, hoje é difícil encontrar um programador que não use um editor mais elegante, não é mesmo?

Bloco de notas, TextPad, entre outros, já ficaram para trás a muuuito tempo.

### Sublime Text

Já tentei usar vários outros editores, [Atom](https://atom.io/), [Eclipse](https://www.eclipse.org/downloads/), [VisualStudio](https://www.visualstudio.com), mas nenhum deles me deixou mais satisfeito que o **[Sublime Text](https://www.sublimetext.com)** que hoje esta na sua **3 versão**.

O que mais me atrai nele é o quanto ele é leve, mesmo intalando plugins para nos ajudar.

Claro, se para você um dos que citei acima é melhor, continue com ele. Afinal, não existe o **Melhor Editor** e sim o melhor editor para **VOCÊ**!

Vamos para de papo furado e vamos falar do plugins que mais uso e gosto do Sublime.

### Material Theme

![Material](https://camo.githubusercontent.com/972bd5d93779fdaf95e02cf0326b429be93adcba/687474703a2f2f692e696d6775722e636f6d2f395079784a4d4e2e676966)

Este plugin é capaz de deixar seu **Sublime** com um visual incrível.

Na [Documentação](https://github.com/equinusocio/material-theme) é possível ver todas as modificações que você poderá ser feita.

Vou deixar aqui o como costumo deixar o meu.

```javascript
  "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
  "theme": "Material-Theme.sublime-theme",
  "material_theme_accent_blue": true,
  "material_theme_accent_scrollbars": true,
  "material_theme_accent_titlebar": true,
  "material_theme_arrow_folders": false,
  "material_theme_big_fileicons": true,
  "material_theme_bold_tab": true,
  "material_theme_bright_scrollbars": false,
  "material_theme_bullet_tree_indicator": true,
  "material_theme_compact_panel": true,
  "material_theme_compact_sidebar": false,
  "material_theme_contrast_mode": false,
  "material_theme_disable_fileicons": false,
  "material_theme_disable_folder_animation": true,
  "material_theme_disable_tree_indicator": true,
  "material_theme_panel_separator": false,
  "material_theme_small_statusbar": true,
  "material_theme_small_tab": true,
  "material_theme_tabs_autowidth": true,
  "material_theme_tabs_separator": true,
  "material_theme_titlebar": true,
  "material_theme_tree_headings": true,
  "show_full_path": true,
  "translate_tabs_to_spaces": true,
  "always_show_minimap_viewport" : true,
  "bold_folder_labels"           : true,
  "font_options"                 : ["gray_antialias", "subpixel_antialias"], // On retina Mac & Windows
  "indent_guide_options"         : ["draw_normal", "draw_active"], // Highlight active indent
  "line_padding_bottom"          : 3,
  "line_padding_top"             : 3,
  "overlay_scroll_bars"          : "enabled",
```

### Emmet

Se você é um desenvolvedor Web, Este maravilhoso plugin irá diminuir e muito seu tempo. Afinal, quem nunca precisou escrever varias `<div>`, ou numa `<table>`, precisou escrever varias `<tr>` e `<td>`?

Digamos que você precise escrever isso:

```html
<div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
</div>
```

Com o [Emmet]() basta digitar `div.row>div.col-md-3*4` e depois clicar no `TAB`.

### Alignment

Este plugin é para desenvolvedores que assim como eu, gosta de deixar o código bem alinhado.

Como assim?

Vou dar um exemplo:

```php
  $a = 1;
  $abc = 5;
  $abcd = 3;
  $ab = 8;
```

Com o [Alignment](https://packagecontrol.io/packages/Alignment) basta selecionar todas as linhas e clicar em `Ctrl + Alt + A` e seu código ficará assim:

```php
  $a    = 1;
  $abc  = 5;
  $abcd = 3;
  $ab   = 8;
```

### Wakatime

Este último na verdade não é um Plugin que vai lhe ajudar na hora de programar. o [Wakatime](https://wakatime.com/) é uma ferramenta que metrifica tudo que você faz no seu editor, como projetos que trabalhou, linguagens que usou, horas gastas, etc.

### Outros plugins

Bom, para finalizar, existem diversos plugins com Snippets para facilitar na hora do auto-complete.
Se está escrevendo em PHP, procure "php snippets", se precisa daquela ajuda em com classes do bootstrap, procure 'Bootstrap snippets'.

É isso aí galera! Este são alguns dos Plugins que uso.

E aí, qual você indicaria?



Meus Plugins Sublime

Os plugins que mais gosto do Sublime Text 3.