Aprenda a ser um mestre zen da marcação

A marcação, ou marcação, refere-se a linguagens de marcação ou marcação como elas são HTML e CSS, e todos nós sabemos como tudo isso é doloroso para abrir e fechar rótulos um por um para criar um modelo da web ...

Claro que existem soluções para isso, uma delas é o autocompletar com IDE como Dreamweaver mierda grifo irritante se você não comprar plugins dele o Edição Komodo muito pesado… A questão é que IDE ou editores de código muito carregados com opções muitas vezes acabam atrapalhando o trabalho de maneiras inimagináveis; tal é o caso de Dreamweaver isso o preenche com código de lixo que você gera graficamente e é pesado, caro e feio. grifo é principalmente irritante porque é grátis, grátis, mas metade das opções são reservadas para usuários pagos ... isso não é divertido. E finalmente temos Edição Komodo, que é muito bom, poderoso e cheio de opções, mas é pesado (100 MB em modo inativo) e configurá-lo é tedioso.

A melhor arma de um desenvolvedor web ou web designer não são os IDEs no estilo de tanque de guerra com mil armas no topo, é um editor de texto simples, alguns plug-ins e a capacidade de digitar como um doente ... a isso adiciona a magia de Codificação Zen e eles terão em seus dedos a melhor ferramenta de marcação já criada (pelo menos para mim).

Mas ... o que diabos é o Codificação Zen?

Simples, é um plugin especial que serve como uma camada de abstração suspensa para HTML e CSS criados em Javascript e disponível para muitas das editoras mais famosas (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, Etc.).

Aha, eu ainda não entendo a mínima ideia do que você está dizendo ...

Então, eu mostro a você um exemplo simples; Lembra da abstração suspensa? Bem, mude para encolher, imagine que você pode pegar uma linha de código HTML / CSS reduzida em uma linha e desdobrá-la como uma cortina ou dobrá-la para trás ... Quer ver como? Você só precisa ter certeza de que tem duas coisas para fazer isso funcionar:

Ter Codificação Zen instalado em seu editor.
Conheça os comandos e a sintaxe para usá-lo.

Ok, dedos para o código:

html>head+body

Vê essa linha de código? Bem, essa é a sintaxe do HTML, é simples:

Primeiro você coloca o nome da tag (html), depois indica quais tags vão estar dentro dessa tag (>) e então o nome das tags que vão dentro dessa tag (cabeça e corpo). O sinal '+' indica que cabeça e corpo são dois rótulos diferentes e que nenhum está contido no outro, é como dizer «juntos mas não misturados«… Então, vamos ver o que essa linha de código gera ao pressionar as teclas mágicas (no meu caso CTRL + E):

Exatamente, 4 linhas de código transformadas em uma, que aparecem magicamente quando você pressiona a combinação de teclas correta ... e pode haver muito mais; por exemplo:

html>head+body>ul#lista_ordenada>li.listilla*5

Mesma sintaxe, mas acrescentamos algo mais ... se você conhece algum CSS, vai perceber que estamos adicionando um ID, classes e, algo que você certamente não sabia; multiplicadores… o que é tudo isso !? Foda-se você me confunde!

Calma, isto é bastante simples, dissemos ao anterior que dentro do corpo introduza uma etiqueta «ul», nada de estranho, expliquei isto acima, então atribuímos um ID, que se conhecer CSS compreenderá que estes estão identificados com o sinal '#', e dentro dessa lista não ordenada (ul) adicionamos cinco rótulos com a listilla de classe (classe), eu explico isso brevemente. Na verdade, é muito simples, '#' denota que é um ID, então 'li.listilla' diz que temos que criar um rótulo «li» com a classe listilla «li class = listilla» e então, dizemos «repita as últimas cinco vezes«. O que nos dá como resultado:

Doze linhas de código escritas em uma única linha e em muito menos tempo 

E isso também pode ser feito com CSS, embora eu não vá alongar o artigo mostrando o óbvio (abaixo, vou lhe passar uma lista completa de cheats para Codificação Zen).

Devo enfatizar que não adianta fazer um zilhão de cem mil linhas em uma, ah não, isso tem um limite e uma forma de ser usado. Se, por exemplo, queremos fazer algo assim:

html>head>title+meta+body>ul#lista_ordenada>li.listilla*5

O que em teoria deveria nos dar isso (veja a linha destacada na última imagem):

Isso nos dará isso:

O que mostra que você também não pode fazer mágica com isso; Lembre-se que um mestre Zen do código deve ser preciso e rápido, e fazer coisas mal feitas leva tempo e velocidade, portanto, a técnica correta para escrever rapidamente e com Codificação Zen seria este:

html>head>body>ul#lista_ordenada>li.listilla*5

Você expande e dentro da tag head:

title+meta

O que lhe daria o código correto:

Embora o Codificação Zen Tem muito mais coisas para mostrar e talvez ter que escrever outra linha de comando dentro do head não seja o melhor, então usamos outro comando, «expandir com abreviatura" no meu caso ctrl + alt + e isso abrirá uma pequena barra onde podemos escrever o código Zen e ver como ele aparece em tempo real. Cuidado, não recomendo escrever tudo com isso e sim dentro das estruturas já criadas, ou seja, primeiro crie as estruturas grandes e depois irá detalhar dentro delas com esta opção.

E há uma infinidade de comandos super legais dentro do Codificação Zen, o problema é que você os pesquise depois de instalá-los e aprenda como usá-los; Com este plugin você não precisará de autocompletar ou snippets para CSS ou HTML, aliás, com isso você perceberá que essas opções são uma total perda de tempo dentro dessas duas linguagens de programação

E para os interessados, aqui está o CheatSheet oficial do Codificação Zen, você pode ver em formato ODF o PDF somente AQUI