Eu gosto de sites estáticos. Para ser mais preciso, gosto de construí-los. Há algo puro em sentar lá na frente da sua tela; é só você e seu editor de texto, escrevendo em HTML e CSS antigos.

Não me entenda mal, os sites dinâmicos são divertidos também. Deus sabe que eu sou fã do WordPress e da facilidade de uso que oferece aos usuários. Sites estáticos me trazem de volta, no entanto. Lembro-me de mudar do software WYSIWYG para um editor de texto. Lembro-me de simplificar o processo de desenvolvimento com a minha primeira função PHP: incluir. Aqueles foram bons dias, mas ao contrário de tantos outros, eles não foram todos embora.

A diferença é que agora podemos fazer melhor. Pré-processadores como Menos e Sass melhorou muito a experiência de escrever CSS. Temos várias linguagens de script para misturar em nosso HTML, se assim escolhermos. E então ... então as pessoas fizeram algumas coisas realmente interessantes.

Eu já mencionei o Martelo aplicativo para Mac. É um aplicativo que introduz suas próprias funções e expansões para um bom HTML antigo, permitindo que você inclua um arquivo como parcial em outro e outras coisas boas. Ele compila os resultados em um site estático regular que pode ser hospedado em qualquer lugar. Na verdade, tem muito mais recursos do que isso, mas este artigo não é sobre o Hammer. Por quê? Está disponível apenas para a plataforma Mac.

Entrar Harpa…

Apresentando harpa

Não é um aplicativo, é muito mais. Inclui pré-processadores para CSS. Inclui modelos de linguagens para documentos HTML. É um mini-servidor que pode ser usado para desenvolvimento ou transformado em um servidor de produção real. Você pode usar o JavaScript do lado do servidor para transformá-lo em um aplicativo completo, conforme executado no Node.js. Ou, se você não for um programador, pode simplesmente criar seu site estático e compilá-lo para hospedagem em outro lugar.

Porque é baseado no Node.js, é multi-plataforma. Também é licenciado pelo MIT, então é grátis. Você pode até mesmo fazer alterações e redistribuí-lo ou revendê-lo, se quiser.

Agora, as pessoas que estiveram de olho terão notado que a Harpa não é a única ferramenta do gênero. Muitas pessoas estão criando ferramentas baseadas em Node para que os projetos da Web sejam iniciados rapidamente. Meu principal problema com estes é que eles geralmente assumem que você quer usar o seu framework CSS favorito, biblioteca de animação ou boilerplate HTML. Harp não faz suposições sobre o código que você quer escrever. Ele apenas fornece as ferramentas para escrevê-lo mais rapidamente.

Lembre-se, ele precisa ser instalado e executado por meio da linha de comando. Não há GUI para isso. Mas uma vez que você está indo - e isso não é nada difícil - os benefícios superam a curva de aprendizado.

As ferramentas

Pré-processadores CSS

A essa altura, tenho certeza de que a maioria dos nossos leitores está familiarizada com as formas como a indústria da Web tentou melhorar o CSS. Quando o mini-servidor do seu projeto está em execução, os arquivos LESS, SASS e Stylus são todos compilados automaticamente no CSS.

A compilação é sempre satisfatoriamente rápida. Em todos os meus testes, as alterações feitas no meu site foram compiladas no tempo que levei para salvar meu arquivo e atualizar meu navegador.

Idiomas de templates

Também estão incluídos Jade e EJS. Estas são ambas as linguagens de templates JavaScript projetadas para ajudar você a escrever / gerar documentos HTML mais avançados com mais flexibilidade. Basicamente, você pode criar modelos HTML e armazenar seu conteúdo de página real separadamente desses modelos. É como usar um CMS, só que não há banco de dados (a menos que você queira um), e você tem que escrever todo o conteúdo em arquivos de texto simples.

A vantagem real é, obviamente, a manutenção do código, além de todas as coisas legais que os programadores reais podem fazer com o servidor real e o JavaScript do lado do cliente. Estas são também as linguagens que permitem criar sistemas mais avançados, como blogs, com relativa facilidade (novamente, se você tiver um programador na folha de pagamento).

Qual a diferença entre os dois? É principalmente sobre como você prefere escrever seu código.

O EJS mantém as coisas simples. Se você já conhece HTML, é apenas uma questão de adicionar tags específicas do EJS, assim: <% include global / header%>. O que eu fiz lá? Basicamente, eu peguei o HTML para o cabeçalho da minha página de outro arquivo e importei para o meu template principal. Você pode fazer coisas muito mais complexas, é claro. Aqui está o que a documentação Harp tem a dizer sobre o EJS.

Jade tem uma abordagem muito diferente para escrever HTML completamente. Parece com isso, conforme mostrado na home page do projeto:

bodyh1 Jade - node template engine#container.colif youAreUsingJadep You are amazingelsep Get on it!p.Jade is pretty cool,

Tudo isso é traduzido para HTML e Javascript. Observe a inclusão de uma instrução if / else no meio de tudo e a dependência de recuo adequado.

Coffeescript

Coffeescript é para JavaScript o que Jade é para HTML. Basicamente, é um formato simplificado para escrever JavaScript, que depois é compilado no material normal. Como o Jade, é altamente dependente de indentação e elimina muito da sintaxe.

Parece com isso (outro exemplo descarado da página inicial do projeto):

math =root:   Math.sqrtsquare: squarecube:   (x) -> x * square x

E a saída é assim:

math = {root: Math.sqrt,square: square,cube: function(x) {return x * square(x);}};

A plataforma

Os sites criados com o Harp podem ser hospedados em qualquer lugar, é claro. Vale ressaltar, no entanto, que os criadores da Harp criaram uma plataforma de hospedagem especificamente projetada para as coisas construídas com seu software. O preço não é ruim e se integra ao Dropbox para facilitar as atualizações automáticas do seu site. Confira aqui: www.harp.io

Conclusão

A harpa, com seus pré-processadores, linguagens de templates, velocidade e bondade multiplataforma, é uma adição sólida à caixa de ferramentas de qualquer designer. Eu digo que vale a curva de aprendizado.