62 / 68
CODE/
EMMET
62
REVISTA LOCAWEB
formatado como H1, e insere um
Sar£Jrafo ínaO ( ínaOmente a
abreviação “#footer” cria uma
DIV para o rodapé.
Depois que se pega o jeito com
as abreviações, a velocidade para
criar códigos se torna muito maior e
mais precisa.
Update Image Size
Se não for um programador
muito disciplinado, é quase
certeza esquecer ou deixar
de inserir as dimensões das
imagens no código. Seja porque
muitas vezes os navegadores
completam isso sem problemas,
seja porque é um trabalho a
mais que parece desnecessário.
Mas não é.
Programar para a web – com
diferentes navegadores, sistemas,
versões, etc. – exige cuidado
e atenção para fechar tags e
completar todas as informações.
A função Update Image Size faz
isso de forma rápida e simples.
Este é o código de uma
imagem no Notepad++:
<img src=
"http://www.
locaweb.com.br/images/
lw2013/logo-lw160x36.png"
alt="" />
Coloque o cursor na tag “src”,
e rode o comando EMMET Update
Image Size. O resultado será este:
<img src=
"http://www.
locaweb.com.br/images/
lw2013/logo-lw160x36.
png" alt="" width="160"
height="36" />
EMMET precisa, claro,
ser capaz de encontrar a
imagem a partir do endereço
para poder informar suas
dimensões corretamente.
Toggle Comment
Comentar seu código, para
entender futuramente ou testar a
eliminação de determinado trecho,
é algo que programadores fazem o
tempo todo. Esse recurso, sensível
ao contexto, ajuda bastante no
processo. A seguir, um trecho
padrão que precisa ser comentado:
Este é um texto que precisa
ser comentado para permitir
compreensão dos códigos
abaixo
no futuro, ou por outros
programadores.
Selecione todo o texto e
acesse a opção EMMET Togle
Coment. O texto é transformado
neste trecho comentado:
<!-- Este é um texto que
precisa
ser comentado para permitir
compreensão dos códigos
abaixo
no futuro, ou por outros
programadores. -->
O comando depende de que
posição o cursor se encontra ao
ser acionado. No código abaixo,
temos um trecho de CSS, com
diferentes elementos:
<style>
body {
padding: 10px; color:
black;
}
</style>
Colocar o cursor ao lado de
“<style>” vai comentar todo
o código dentro desta tag:
<!-- <style>
body {
padding: 10px; color:
black;
}
</style> -->
Colocar o cursor em “body”
vai comentar apenas o trecho
relacionado a ele:
<style>
/* body {
padding: 10px; color:
black;
} */
</style>
Note que o EMMET entende a
diferença entre comentar “<style>”
e um comando interno como
“body”, e usa caracteres distintos
para cada caso.
Evaluate Math Expression
O comando resolve equações
e retorna o resultado no código.
Encurta o caminho entre precisar
de um valor e abrir a calculadora
do Windows. Digite uma expressão
matemática qualquer, como:
2 * 6
.
Acesse o item do Menu do
EMMET. Clique em Evaluate Math
Expression e verá o resultado:
12
.
Qualquer expressão
matemática pode ser calculada e
resolvida pelo comando, como:
20
* 4 + 10
Que retorna:
90
.
Remove Tag
Esta função é excelente para
economizar tempo em longos
trechos de código. Permite excluir
uma tag rapidamente, sem se
perder tentando encontrar seu
fechamento nem apagando o
fechamento errado.
Este código mostra como usar
o Remove Tag.
<body>
<div class="wrapper">
<h1>Title</h1>
<p>Lorem ipsum dolor
sit amet.</p>
Divshot
(https://github.com/divshot): ferramenta é compatível com o EMMET