<p>Por mais root que seja, hoje é difícil encontrar um programador que não use um editor mais elegante, não é mesmo?</p>
<p>Bloco de notas, TextPad, entre outros, já ficaram para trás a muuuito tempo.</p>
<h3 id="sublime-text"><a href="#sublime-text" class="anchor">Sublime Text</a></h3>
<p>Já tentei usar vários outros editores, <a href="https://atom.io/">Atom</a>, <a href="https://www.eclipse.org/downloads/">Eclipse</a>, <a href="https://www.visualstudio.com">VisualStudio</a>, mas nenhum deles me deixou mais satisfeito que o <strong><a href="https://www.sublimetext.com">Sublime Text</a></strong> que hoje esta na sua <strong>3 versão</strong>.</p>
<p>O que mais me atrai nele é o quanto ele é leve, mesmo intalando plugins para nos ajudar.</p>
<p>Claro, se para você um dos que citei acima é melhor, continue com ele. Afinal, não existe o <strong>Melhor Editor</strong> e sim o melhor editor para <strong>VOCÊ</strong>!</p>
<p>Vamos para de papo furado e vamos falar do plugins que mais uso e gosto do Sublime.</p>
<h3 id="material-theme"><a href="#material-theme" class="anchor">Material Theme</a></h3>
<p><img src="https://camo.githubusercontent.com/972bd5d93779fdaf95e02cf0326b429be93adcba/687474703a2f2f692e696d6775722e636f6d2f395079784a4d4e2e676966" alt="Material"></p>
<p>Este plugin é capaz de deixar seu <strong>Sublime</strong> com um visual incrível.</p>
<p>Na <a href="https://github.com/equinusocio/material-theme">Documentação</a> é possível ver todas as modificações que você poderá ser feita.</p>
<p>Vou deixar aqui o como costumo deixar o meu.</p>
<pre><code class="language-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 &#x26; Windows
  "indent_guide_options"         : ["draw_normal", "draw_active"], // Highlight active indent
  "line_padding_bottom"          : 3,
  "line_padding_top"             : 3,
  "overlay_scroll_bars"          : "enabled",
</code></pre>
<h3 id="emmet"><a href="#emmet" class="anchor">Emmet</a></h3>
<p>Se você é um desenvolvedor Web, Este maravilhoso plugin irá diminuir e muito seu tempo. Afinal, quem nunca precisou escrever varias <code>&#x3C;div></code>, ou numa <code>&#x3C;table></code>, precisou escrever varias <code>&#x3C;tr></code> e <code>&#x3C;td></code>?</p>
<p>Digamos que você precise escrever isso:</p>
<pre><code class="language-html">&#x3C;div class="row">
  &#x3C;div class="col-md-3">&#x3C;/div>
  &#x3C;div class="col-md-3">&#x3C;/div>
  &#x3C;div class="col-md-3">&#x3C;/div>
  &#x3C;div class="col-md-3">&#x3C;/div>
&#x3C;/div>
</code></pre>
<p>Com o <a href="">Emmet</a> basta digitar <code>div.row>div.col-md-3*4</code> e depois clicar no <code>TAB</code>.</p>
<h3 id="alignment"><a href="#alignment" class="anchor">Alignment</a></h3>
<p>Este plugin é para desenvolvedores que assim como eu, gosta de deixar o código bem alinhado.</p>
<p>Como assim?</p>
<p>Vou dar um exemplo:</p>
<pre><code class="language-php">  $a = 1;
  $abc = 5;
  $abcd = 3;
  $ab = 8;
</code></pre>
<p>Com o <a href="https://packagecontrol.io/packages/Alignment">Alignment</a> basta selecionar todas as linhas e clicar em <code>Ctrl + Alt + A</code> e seu código ficará assim:</p>
<pre><code class="language-php">  $a    = 1;
  $abc  = 5;
  $abcd = 3;
  $ab   = 8;
</code></pre>
<h3 id="wakatime"><a href="#wakatime" class="anchor">Wakatime</a></h3>
<p>Este último na verdade não é um Plugin que vai lhe ajudar na hora de programar. o <a href="https://wakatime.com/">Wakatime</a> é uma ferramenta que metrifica tudo que você faz no seu editor, como projetos que trabalhou, linguagens que usou, horas gastas, etc.</p>
<h3 id="outros-plugins"><a href="#outros-plugins" class="anchor">Outros plugins</a></h3>
<p>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'.</p>
<p>É isso aí galera! Este são alguns dos Plugins que uso.</p>
<p>E aí, qual você indicaria?</p>



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.


Agora que conhece um pouco sobre o Vue.js, vou mostrar o quanto é simples começar a utiliza-lo.

Caso não tenha visto meu post Conhecendo Vue.js, [clique aqui](/conhecendo-vuejs/) e depois volte para este post.

Bom, vamos lá.

Na documentação do [Vue.js](https://br.vuejs.org/v2/guide), você pode instalar de duas maneiras:

- NPM
- CDN

Para este exemplo não será necessário a instalação através do NPM.

Vamos criar um index.html, onde no `<head>` adionaremos o link CDN:

- https://unpkg.com/vue@2.5.16/dist/vue.js

No `<body>` colocaremos uma `<div>` com o `id=app`

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World - Vue.js 2</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
```

Antes do fechamento do `<body>` abrimos a tag `<script></script>>` para instanciar.
E quando instaciamos o objeto Vue `new Vue()`, devemos informa-lo através do parametro **el** qual o elemento html será montado nossa aplicação.

Como nosso elemento é identificado através de um id cujo nome é `"app"` colocamos `el: '#app'`.

Lembrando que podemos colocar qualquer nome de **id**.

Então nosso script ficaria assim:

```javascript
new Vue({
  el: "#app",
})
```

**Pronto**, nosso index.html já está pronto para utilizar o Vue.

Para renderizar nossas propriedades em nossa tela, precisamos declara-las através do objeto `data`.

```javascript
    new Vue({
      el: '#app',
      data {
        msg: 'Hello Vue.js'
      }
    });
```

Agora como faço para renderizar essa propriedade `msg`?

Simples, a interpolação do Vue é `{ { } }`, ou seja, basta dentro da nossa `<div id='app'>` colocarmos `{ { msg } }`

e o nosso resultado será o famoso Hello World.

![Way Data-bind](/assets/img/posts/directiva.png)

Simples não?

Só para ter mais um gostinho da praticidades do Vue.js, vou mostrar para você outras coisas que ele é capaz de fazer.

## v-for

O `v-for` é o famoso `for` , onde varre todo um array em javascript.

Já aprendemos como declarar nossas propriedades, então vamos criar um array.

```javascript
new Vue({
  el: "#app",
  data: {
    title: "Times de Futebol",
    times: [
      { name: "Corinthians" },
      { name: "Palmeiras" },
      { name: "São Paulo" },
      { name: "Santos" },
    ],
  },
})
```

Nosso html criamos uma `<ul>` e nela usamos o `v-for`

```html
<div id="app">
  <h3>{ { title } }</h3>
  <ul v-for="time in times">
    <li>{ { time.name } }</li>
  </ul>
</div>
```

Nosso resultado será:

![v-for](/assets/img/posts/hellovue1.png)

## v-if e two-Way Data-bind

Neste exemplo vou aproveitar e já mostrar essas 2 maravilhas.

Vamos melhorar nosso array times e acrescentar mais uma informação origem no nosso objeto. Agora saberemos se o time é do Brasil ou Internacional.

```javascript
new Vue({
  el: "#app",
  data: {
    title: "Times de Futebol",
    times: [
      { name: "Corinthians", origem: "Brasil" },
      { name: "Palmeiras", origem: "Brasil" },
      { name: "São Paulo", origem: "Brasil" },
      { name: "Santos", origem: "Brasil" },
      { name: "PSG", origem: "Internacional" },
      { name: "Real Madrid", origem: "Internacional" },
      { name: "Barcelona", origem: "Internacional" },
      { name: "Manchester City", origem: "Internacional" },
    ],
  },
})
```

Vamos colocar um `checkbox` para mostrarmos apenas o que queremos ver, Brasil ou Internacional, ou até mesmo ambos.

```html
<div id="app">
  <h3>{ { title } }</h3>
  <input
    type="checkbox"
    id="brasil"
    value="Brasil"
    v-model="checkedOrigem"
  /><label for="brasil">Brasil</label>
  <input
    type="checkbox"
    id="internacional"
    value="Internacional"
    v-model="checkedOrigem"
  /><label for="internacional">Internacional</label>
  <ul v-for="time in times">
    <li>{ { time.name } }</li>
  </ul>
</div>
```

Repare que no `<input>` colocamos a tag `v-model`, que é o que precisamos para o nosso **Way Data-bind**.
Mas só isso não é suficiente e até mesmo nosso console mostrará um erro javascript. É preciso
declarar a propriedade `checkedOrigem` onde será um array

```javascript
new Vue({
  el: "#app",
  data: {
    title: "Times de Futebol",
    times: [
      { name: "Corinthians", origem: "Brasil" },
      { name: "Palmeiras", origem: "Brasil" },
      { name: "São Paulo", origem: "Brasil" },
      { name: "Santos", origem: "Brasil" },
      { name: "PSG", origem: "Internacional" },
      { name: "Real Madrid", origem: "Internacional" },
      { name: "Barcelona", origem: "Internacional" },
      { name: "Manchester City", origem: "Internacional" },
    ],
    checkedOrigem: [],
  },
})
```

Se colocarmos `{ { checkedOrigem } }` em nosso HTML aparecerá `[]` em nosso browser. Mas ao clicar em Brasil, ficará `[ "Brasil" ]` e em seguida clicar em Internacional, aparecerá `[ "Brasil","Internacional"]`. E isso é o que chamamos de **way data-bind**. Ao manipularmos nossa propriedade javascript, o Vue se encarrega de alterar os valores printados.

O **V-if** é o famosos `if` de qualquer linguagem, então colocamos o **v-if()** no `<li>`. Nossa condição será um simples `indexOf`.

```html
<li v-if="(!checkedOrigem.indexOf(time.origem))"></li>
```

Logo de cara, você vai ver que a nossa lista sumiu. Mas basta clicar em Brasil ou Internacional para o Vue resolver nosso problema.

![v-for](/assets/img/posts/hellovue2.png)

**Incrível** não?

Enfim, isso é apenas uma parcela do que você pode fazer com este FrameWork.

Por enquanto é isso galera.


Hello World Vue.js

Meus Plugins Sublime

Os plugins que mais gosto do Sublime Text 3.