Boteco Digital

Zen-Coding, uma maneira diferente de escrever HTML

Para mim, uma das coisas mais chatas é ter que escrever HTML, pois é um código repetitivo e isso é extremamente cansativo e entediante. E a edição continua “chata” até mesmo utilizando as melhores IDE’s do mercado. Claro que podemos recorrer ainda para os famosos editores WYSIWYG, mas convenhamos, um bom desenvolvedor que se prese não as utilizaria.

Bom, ai que entra o zen-coding que não se trata de uma nova IDE, mas sim de um plugin, ou melhor, uma coleção de scripts, disponível para uma grande quantidade de IDEs. Ele utiliza um padrão lógico para construir sentenças que, com o pressionar de uma tecla de atalho, transforma-se em trechos enormes de código, prontos e indentados.

Um exemplo seria a criação de uma lista somente em uma linha, com o Zen-Coding ficaria assim:

div#menu>div.BotecoDigital+ul#opcoes>li*5>a

E ele gera o seguinte código:

<div id="menu">
        <div class="BotecoDigital"></div>
        <ul id="opcoes">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

Vejam um vídeo disponibilizado pelos desenvolvedores demonstrando o Zen-Coding:

No site oficial, estão disponíveis vários plugins para os principais editores HTML do mercado, cada um com instruções de instalação anexas. Aqui, testei com o Notepad++, e correu tudo bem.

Se você trabalha com HTML, o Zen-Coding merece uma chance. Pode demorar um pouquinho para aprender a sintaxe e pegar o jeito, mas com algum tempo de prática, o ganho em tempo é enorme.

Tags
Categorias CSS Dicas Vídeo

Analista de Infraestrutura em Cloud Computing no 1º Centro de Telemática de Área do Exército Brasileiro, Consultor de TI, Administrador de Sistemas e Professor. Graduado em Análise e Desenvolvimento de Sistemas e Pós-graduado em Gestão da Segurança da Informação.

Outros posts do autor
comments powered by Disqus