The one where everything started: 1-Pug

Postado dia 18/9/2017, por Marcelo Cristiano Araujo Silva

Tempo estimado de leitura: 4 minutos


Como diria o pessoal do 5 alguma coisa: Olá, internet.

Este que vos escreve chama-se, Marcelo Cristiano. Essa é a primeira vez que estou escrevendo algo para a internet no intuito que alguém leia. Entre todas as minhas ideias, gostaria de falar primeiro sobre a parte técnica de estar escrevendo um blog pela primeira vez.

Tem alguns anos que pensei em escrever um blog sobre tecnologias, mas só agora que surgiu a oportunidade de faze-lo. Tive que criar um portfólio para um hackathon que vou participar e estou aproveitando o site para escrever o blog que tanto queria.

Aproveitei a experiência para me familiarizar com 3 tecnologias que eu não conhecia muito bem, mas que eu gostaria de conhecer.

  1. Pug;
  2. Heroku com docker;
  3. Bulma.

E no meio disso, conheci uma quarta:

  1. Poet.

Hoje eu vou falar um pouco sobre o pug.

Pug

Fazia um tempo que eu queria aprender pug, principalmente por causa das recomendações. Vantagens como uma sintaxe HTML mais enxuta e mais simples de ver e entender ajudaram-me a querer aprender pug.

Pug é uma template engine feito para node.js. Ele basicamente pega o arquivo .pug, compila para uma função javascript, e essa função retorna uma string HTML.

Esse é um exemplo de um código pug aqui do blog. Linha a linha:

  1. Está sendo definida uma section que tem uma classe section;
  2. Por padrão, quando não define-se a tag, ela vem como div. Então, a segunda linha tem uma div com a classe container;
  3. O each faz parte da sintaxe do pug e 'posts' é um array que foi passado para esse template;
  4. O include também faz parte do pug. Nessa linha estou passando um trecho de código que renderiza o preview de um post;
  5. Por último, fora do each, renderizo o código de paginação que está na pasta includes no arquivo pagination.pug. (No futuro pretendo falar um pouco sobre paginação).

Pela imagem também da para perceber a orientação a indentação. Essa parte lembra um pouco a linguagem python. Se tiver um recuo significa que a estrutura é filha da anterior. Se não, ela é irmã da anterior.

A imagem anterior vai gerar um código HTML parecido com esse:

<section class="section">
    <div class="container">
        <>código do post 1</>
        <>código do post 2</>
        <>código do post 3</>

        <>código da paginação</>
    </div>
</section>

Documentação do pug

Curiosidades

No final de 2015, surgiu um problema para o pug, ele chamava-se jade. Infelizmente já existia uma marca de software que usava esse nome. Logo, tiveram que começar um projeto para renomear o software. Criação de logo, branding, site novo, mudança nos nomes dos repositórios, entre várias outras coisas. Pode acompanhar mais sobre esse problema por aqui.

Blog

Voltando um pouco no assunto do blog. Pretendo fazer a sequência desse post falando sobre as tecnologias que usei para criar o blog.

Essa também é versão 1.0 do blog, ele está evoluindo enquanto faço esse post. A primeira coisa que estou correndo atrás é sobre um sistema de comentários. Provavelmente farei um post sobre isso assim que ele for concluido.

Espero que esse seja o primeiro post de muitos que estão por vir.

Categoria:

Web