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:
div#header > h1.logo > a {logo do site} < ul.menu > li.item-$*5 > a
Retorne este código:
<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.
35 Comentários
Abraão Levi 18/02/2010 às 08:53
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 18/02/2010 às 09:14
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.
Rhamsés Soares 18/02/2010 às 09:28
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!
Sérgio Rodrigues 18/02/2010 às 09:30
Interresante! estudarei isso..
bruno 18/02/2010 às 09:37
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 18/02/2010 às 09:38
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!
James Clebio 18/02/2010 às 09:42
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 18/02/2010 às 09:42
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…
PotHix 18/02/2010 às 09:59
Æ!!
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
Anderson Ferreira 18/02/2010 às 10:06
Ó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 !
Adolfo Sousa 18/02/2010 às 10:15
O zencoding mudou o desenvolvimento pro github recentemente. Se quiserem ver o codigo ou as novidades e pra la que voces devem ir.
Diego Eis 18/02/2010 às 10:42
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 18/02/2010 às 10:51
E o Netbeans? O que vocês acham dele?
Cleyton 18/02/2010 às 12:53
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.
Cleyton 18/02/2010 às 12:55
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 18/02/2010 às 13:24
Nice post
Joel Wallis 18/02/2010 às 16:17
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
Felipe Borcard 18/02/2010 às 18:58
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 18/02/2010 às 19:16
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!
Marcos Paiva 19/02/2010 às 07:07
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!
Marcos Paiva 19/02/2010 às 07:09
Ae Saulo Barbosa, usa o VIM cara, uma boa alternativa…..ele tem uns esquemas sinistros!
Paulo 19/02/2010 às 09:50
tem um plugin pra edit plus
http://www.vfresh.org/w3c/667
Funciona, mas não é tão automatico como a do video
Guto 19/02/2010 às 22:52
diego, o zen coding pro coda (mac, obviamente) não consigo abri-lo, qual a solução? me salve
Fernando Medrado 20/02/2010 às 20:51
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 21/02/2010 às 22:34
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.
Sérgio Luiz Araújo Silva 22/02/2010 às 14:48
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!
Tiago Celestino 26/02/2010 às 15:33
Muito interessante, vou testar no Coda e no DW no Windows.
Pererinha 02/03/2010 às 14:16
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 03/03/2010 às 23:44
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..
Cristiano Web » Estou com “um milhão de sites” para produzir 04/03/2010 às 10:40
[...] para o desenvolvimento de um código em tableless. Como por exemplo o CODA e o Zen Coding. Veja o ótimo vídeo do Diego Eis explicando as vantagens no uso desses aplicativos. Já o meu parceiro de desenvolvimento, Cayo [...]
Nuno 11/03/2010 às 01:07
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
André Mácola 12/03/2010 às 00:38
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?
Psysapiens 16/03/2010 às 17:28
Boa!
Quando pegar um trampo grande, irei usar um deles!
=)
Erick Patrick 22/03/2010 às 08:44
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 25/03/2010 às 15:11
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