Tableless - Desenvolvimento inteligente com Padrões Web

18/02/2010
Artigos

Produtividade: editores e snippets

Se você é um desenvolvedor de verdade, você deve conhecer seu editor de códigos. Não importa qual ele seja, contanto que você o conheça do começo ao fim, saiba suas limitações e saiba utilizar suas vantagens para minimizar o tempo de produção.

Por


Não é muito difícil ser produtivo. Em muitas palestras e aulas, me perguntam como o desenvolvedor client-side (ou qualquer outro) pode melhorar sua performance e desenvolver melhor, mais rápido e com qualidade. Além de muito treino, existem outros pontos que se utilizados da maneira correta, podem agilizar seu trabalho. Um destes pontos é o seu editor de código.
Você já parou para conhecer seu editor? Muitos desenvolvedores simplesmente ignoram a existência das features que seu editor carrega. Simplesmente instalam e digitam código. Desenvolvedor que é desenvolvedor, gasta tempo aprendendo seu editor.

Quando eu utilizava Windows, experimentei dezenas de editores. Foram muitos mesmo. Comecei pelo Notepad, passei pelo Homesite e CoffeeCup. Antes de migrar para Mac, eu estava utilizando EditPlus, mas estava tendo uma quedinha pelo NotePad++. Os dois são muito bons, embora faça um pouco de tempo que o EditPlus não tenha uma atualização.
Quando migrei para Mac, comecei utilizando o BlueFish. Gostei, mas não fui com a cara. A mesma coisa aconteceu com o BBEdit. Foi aí que encontrei o Textmate e depois o Coda. Gostei dos dois. Utilizei durante muito tempo o Coda por conta do seu FTP. Embora o Coda seja completíssimo, o TextMate me ganhou.

Toda essa migração de editores não foi da noite para o dia. Quando eu realmente gostava de um editor, eu o utilizava por muito tempo. Alguns desenvolvedores trocam de editor como trocam de roupa. Não é saudável. Você acaba não conhecendo suas especialidades e limitações. Você não tem tempo para se acostumar com a interface. E isso tudo prejudica sua produtividade. Eu recomendo que você tenha um editor predileto e fique apenas com ele.

Snippets

Eu gostava do Editplus por que ele era um dos únicos editores para Windows que tinham um configurador de Snippets decente (e olha que nem era muito bom). O Textmate tem um gerenciador de snippets invejável e foi por isso que fiquei com ele e não com o Coda.

Na maioria dos editores, os snippets te ajudam com código repetitivo. Eles autocompletam e inserem códigos que são repetitivos para que você não perca tempo redigindo. Mas pára por aí. Você sempre tem que digitar um bocado de código mesmo quando o snippet te ajuda no trabalho pesado. Claro que você tem a possibilidade de configurar e personalizar os seus snippets. Mas muitos dos desenvolvedores não querem parar para criar uma biblioteca de snippets que os ajudem realmente no trabalho pesado do código. É aí que entra o Zen Coding, uma biblioteca completa que lhe permite escrever pouco código e obter o máximo de resultado.

A sintaxe do Zen Coding é baseado em CSS. Você escreve “seletores” de CSS para obter código HTML.
O Zen Coding foi feito pelo Sergey Chikuyonok (em russo). Veja abaixo um vídeo demo de como funciona:

Pra quem não quiser ver o vídeo: a idéia é que uma linha como essa:

1
div#header > h1.logo > a {logo do site} < ul.menu > li.item-$*5 > a

Retorne este código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="header">
<h1 class="logo">
        <a></a></h1>
<ul class="menu">
    <li class="item-1">
            <a></a></li>
    <li class="item-2">
            <a></a></li>
    <li class="item-3">
            <a></a></li>
    <li class="item-4">
            <a></a></li>
    <li class="item-5">
            <a></a></li>
</ul>
</div>

Os programadores da Visie me mostraram estes dias um outro projeto criado pelo Rico Sta. Cruz chamado SparkUp. O Sparkup foi inspirado no Zen Coding. Mas tem uma coisa ou outra diferente. Abaixo veja um vídeo introdutório:

Se você é iniciante, entenda que você precisa aprender HTML primeiro. É interessante que você saiba o que cada tag faz, qual sua função e suas características. Aconselho o uso destes snippets apenas para desenvolvedores que já são fluentes em HTML. Não adianta você escrever em Sparkup, mas não saber do que se trata cada tag que foi jogada ali. Isso pode te transformar em um desenvolvedor analfabeto.

O Sparkup tem apenas suporte para Textmate e VIM, por enquanto. Já o Zen Coding tem suporte completo para Aptana, Coda, Espresso, Textmate, editArea, Visual Studio, Komodo Edit/IDE. Sem contar com suporte parcial para os editores TopStyle, Sublime Text, GEdit, Dreamweaver CS4, UltraEdit, BBEdit e Emacs.

Para baixar o Sparkup visite seu projeto no GitHug.
Para baixar o Zen Coding, visite seu projeto no Google Code.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://falandoti.com.br/ Abraão Levi

    Muito interessante! Já faz 2 semanas que estou usando o Zen Coding, e é muito interessante o ganho em “velocidade” para escrever um código!

    Pena que o Sparkup não tem suporte ao Komodo e ao Aptana, gostei da idéia de voltar ao elemento pai.

    abrs!

  • Igor Ramos Tiburcio

    Gostei, não conhecia o SparkUp e só não testarei porque não tem suporte pra nenhum editor que eu tenho em mãos. Agora o Zen Coding eu tenho no Gedit e realmente deixa mais rápido o desenvolvimento.

  • http://www.meadiciona.com/rhamses Rhamsés Soares

    Fala Diego.

    Um ótimo editor Windows que eu descobri há pouco tempo e que me conquistou foi o E-TextEditor, já ouviu falar dele?

    Não é tão dinâmico como este exemplo, mas ele tem Snippets interessantes que te poupam muito trabalho.

    Ele não deve ser tão diferente do TextMate mas com certeza foi o melhor que qualquer editor Windows que eu já usei.

    Se alguém não conhece esse aqui é o link http://www.e-texteditor.com/

    Grande abraço!

  • http://www.sergiorodrigues.art.br/blog Sérgio Rodrigues

    Interresante! estudarei isso..

  • bruno

    Eu realmente tinha sentido a falta dessa função no Zen Coding (Já inserir o texto no elemento), talvez com as proximas versões seja implementado, também seria bom se já possivel inserir o nome das imagens. Quanto aos editores atualmente estou usando o aptana, gostei muito e não tive dificuldade pois já desenvolvia em java e usava o eclipse. Parabéns pelo post.

  • Saulo Barbosa

    poxa mto legal! nessas horas que eu me arrependo de n ter um mac e ter trocado windows por linux.. :( . Eu estou com muita dificuldade em encontrar um editor para o linux, estou usando o bluefish, mas sinto falta de muita coisa que tinha no aptana (n estou usando o aptana pois meu pc atual é um tanto defasado). Se alguém puder sugerir outros editores para linux, agradeço!

  • http://jamesclebio.com.br James Clebio

    Creio que a linha usando Zen Coding está errada:

    div#header > h1.logo > a {logo do site li.item-$*5 > a

    Para gerar o código HTML mostrado, o correto seria:

    div#header>h1.logo+ul.menu>li.item-$*5>a

    []s

    ;D

  • Ivan

    Desculpa mas vc não citou o DreamWeaver, que faz tudo isso e mto mais… e não me diga que ele suja o código, estou falando de usar ele escrevendo o codigo na mao mesmo…

  • http://pothix.com/blog PotHix

    Æ!!

    Eu sou totalmente a favor de aprender bastante sobre o seu editor preferido de programação e não ficar trocando sempre (pelo menos não por muito tempo, por que experimentar outros para conhecer é bom, assim você sabe se o seu é poderoso ou não).

    Atualmente eu uso Vim e tenho certeza que se você souber usar todos os recursos que ele te fornece você consegue fazer quase tudo que qualquer editor pode fazer.

    Há braços

  • http://www.nanpos.com/ Anderson Ferreira

    Ótima matéria, já tinha visto falar dessa maneira de programação em outro site, mais agora esclareceu mais minhas dúvidas, por ser mais detalhado.

    PARABÉNS !

  • http://www.adolfosousa.com.br/blog Adolfo Sousa

    O zencoding mudou o desenvolvimento pro github recentemente. Se quiserem ver o codigo ou as novidades e pra la que voces devem ir.

  • http://twitter.com/diegoeis/ Diego Eis

    Ivan, porque eu usaria um editor como o Dreamweaver que demora alguns minutos para abrir, para escrever código na mão, se eu posso usar um outro editor que demora 2 segundos?

  • Piero Giusti

    E o Netbeans? O que vocês acham dele?

  • http://twitter.com/cleytonferrari Cleyton

    Olá, já utilizei alguns deste citados ai, mas depois que descobri o NetBeans para PHP é praticamente o Visual Studio da web, tem snippets também, tem um preview do Css (meio tosco), mas vale a peda dar uma conferida, e agora na ultima versão tem o FTP incluso (fraquinho) mas já é o começo.

  • http://twitter.com/cleytonferrari Cleyton

    Esqueci de comentar, o NetBeans tem o intelisense que mostra os metodos feitos em outros arquivos php, e isso é um grande passo na produtividade, o legal é que o dreamweaver que é pago não tem! viva o opensource!

  • Igor Escobar

    Nice post ;)

  • http://joelwallis.net Joel Wallis

    Se o assunto é Snippets, então outro assunto deve ser mencionado: Texter!

    Um programa fantástico! Não depende de editor, nem de IDE. Você simplesmente cria o snippet nele e ele funciona em qualquer lugar! No Bloco de Notas, no Notepad++, no MSN, no Aptana, NetBeans, Eclipse e em qualquer lugar que você estiver escrevendo! Simples assim!

    O programa é para quem usa Windows, mas acredito que para Linux deva existir algo similar.

    Link:
    http://lifehacker.com/238306/lifehacker-code-texter-windows

  • http://www.twitter.com/felipeborcard Felipe Borcard

    como disse um grande amigo desenvolvedor o zen coding é uma mão na roda.. velocidade total adorei a matéria Tableless está de parabéns programmers is we on the tape

  • Diego Souza

    Diego Eis, eis aqui alguém que gostou deste artigo. Uso winXP e resolvi aprender a usar melhor o Notepad++ depois de usar o Dreamweaver, existe algo que substitua a função do Zen Coding no Notepad++ tão bem quanto ele? Obrigado!

  • http://marcos-paiva.com Marcos Paiva

    Boa, Boaaaaa.

    A grande dúvida é na hora de escolher o “melhor” editor…

    No trabalho eu uso mac portanto assim como vc uso o textmate e às vezes o vim. No windows isso é tão complicado, ainda não axei um editor que chegue aos pés da rapidez/simplicidade do mate…por hora uso o dreamweaver mesmo (em modo de codigo rsrrs).

    Zen coding é um caso a parte, realmente facilita horas de trampo chato…..

    Abs!

  • http://marcos-paiva.com Marcos Paiva

    Ae Saulo Barbosa, usa o VIM cara, uma boa alternativa…..ele tem uns esquemas sinistros!

  • Paulo

    tem um plugin pra edit plus

    http://www.vfresh.org/w3c/667

    Funciona, mas não é tão automatico como a do video

  • http://blogzeropoint.wordpress.com Guto

    diego, o zen coding pro coda (mac, obviamente) não consigo abri-lo, qual a solução? me salve

  • Fernando Medrado

    Grande Diego, ótimo artigo.
    Deu uma grande força aqui pra mim.
    Tô vendo se configuro meu gEdit com o Zen Coding.
    Parabéns!

  • Marcio Toledo

    Estou usando o PSPad há alguns meses e é excelente, apesar de não muito conhecido (abandonei o Dreamweaver e outros superestimados). Nele é possível criar snippets também, pena que para fazer a configuração é um pouco chato.

    Outra dica é usar o Texter, como já citaram acima.

  • http://vivaotux.blogspot.com Sérgio Luiz Araújo Silva

    Postei no meu blog uma referência para esta super dica:
    http://vivaotux.blogspot.com/2010/02/zen-code-ou-sparkup.html

    O fato do Sparkup ser mais turbinado e já ter suporte ao amado vim, além de ser feito em python. Cara é tudo de bom. Pessoalmente me encanta usar linux com um editor muito leve, e ter a mesma produtividade de algumas ides pirateadas por aí :)

    Continue postando dicas como esta, a blogsfera tem muito a agradecer!

  • http://tcelestino.com.br Tiago Celestino

    Muito interessante, vou testar no Coda e no DW no Windows.

  • http://www.danielcamargo.com.br/ Pererinha

    Eu vi a utilização dos snippets primeira vez no TextMate . E por utilizá-los a produtividade aumenta bastante. E depois disso comecei a utilizar o E-TextEditor que é considerado o TextMate do Windows.

    E há um tempo atrás tive que trabalhar com Ubuntu e fiz alguns snippets Jquery para o editor Gedit: http://www.danielcamargo.com/stuffs/gedit-snippets-jquery/.

    Abraços.

  • Igor de Paula

    Acho que todos keremos facilidades, mas o melhor editor nao existe, existe akele q nos facilita, akele q nos impressiona, nossa, quando passei do dream para o zend studio, meu deus, gera documentacao, phpdoc, ftp, mas eh pesado e pago, muito caro, eu achei o netbeans, e reconhece codigo php em arquivo sem ter a extensao php, eh gratuito, e peq, 30mb….acho q o desenvolvedor tem que achar o melhor editor pra ele, para suas necessidades..

  • Pingback: Cristiano Web » Estou com “um milhão de sites” para produzir

  • http://www.nunomedia.com Nuno

    Olá pessoal, estou tentando usar o zen coding. Já instalei no coda, mas não está funcionando, tenho que especificar os triggers? que teclam uso para ele transformar? um abraço

  • http://www.macola.com.br André Mácola

    Eu utilizo o Notepad++ e o Dreamweaver em modo Code. Esse Zen Conding é realmente show de bola.

    Bom, somente uma coisa me faz utilizar o Dreamweaver, é sua coloração em tags especícas. Ex: <img .. a linha fica roxa. <form fica laranja….

    Não encontrei nenhum editor ainda com essa possibilidade, acredito que nem o textmate, me corrijam se estiver errado, alguem conhece algum?

  • http://tudopodre.com.br Psysapiens

    Boa!
    Quando pegar um trampo grande, irei usar um deles!
    =)

  • http://rpgdm.erickpatrick.com Erick Patrick

    Eu já conhecia o Zen Coding pelo Textmate há um tempinho já, ai quando migrei pro Espresso, ainda na versão beta dele, senti falta, mas, felizmente, eles adotaram!

    É surpreendente como há coisa que a gente pode realmente acelerar, principalmente, quando usamos para fazer “mockups funcionais”…

    Vou ver esse Sparkup e testar no Vim, ver como é, direitinho, quem sabe tentar até fazer uma versão para Espresso o/

    Belas dicas!

  • adeonir

    Também gostei dessa dica.
    Eu também vivo entre Textmate e Coda, mas ultimamente tenho testado o Espresso (por sinal é o mesmo usado no video do Zen Coding). É muito semelhante o Textmate porém mais AppleLike feito o Coda.

    Abraços

  • Pedro Augusto

    Para o mac, eu adicionaria à lista o Fraise (fraiseapp.com). Um editor simples e com visual limpo. Digno de uma experimentada! Ah… é gratuito.

  • Marcio Gazetta

    Ainda continuo com o EditPlus pela velocidade dele. Pena que ele ta excluido do Zen Coding.
    Quando conheci o ZC fiquei embasbacado, pois ele turbina os snippets que eu ja uso no EP.

    Belo artigo, onde vc explica de forma did[atica sobre editores. Parabéns!

  • http://pponto.com Paula Faria

    Cara, é MUITO lindo isto.
    Produtividade 100%

    Valeu muito pela dica =)

  • Pingback: Ferramentas e metodologia para entregar mais e com maior qualidade | Tableless - Desenvolvimento com Padrões Web

  • Pingback: Um raio-x do seu website | MIC Vitória