Nós programadores passamos dias e dias automatizando tarefas manuais de nossos usuários e muita das vezes deixamos de automatizar tarefas repetitivas de nosso cotidiano. Aquele velho ditado de aplica bem: "casa de ferreiro espeto é de pau".
Uma dica que eu quero passar é como transformar textos utilizando Notepad++ e expressões regulares.
Para isso vou utilizar um exemplo simples, imagine que você tem uma lista de variáveis conforme abaixo:
Para transformar essas variáveis em propriedades precisamos isolar o nome da propriedade e o tipo. Utilizando a seguinte expressão regular:
" Private _(.*) AS(.*)"
Primeiro declaramos a primeira parte da string que não varia entre as linhas: ' Private _'. Depois declaramos o bloco '(.*)' que será usado para recuperar o nome. Seguindo a mesma ideia declaramos ' AS' seguido do bloco para resgatar o tipo '(.*)'.
Depois colocamos a string que será substituída conforme abaixo:
Public Property \1\(\) As \2 \r\n Get \r\n Return _\1 \r\n End Get \r\n Set\(ByVal value As \2\) \r\n _\1 = value \r\n End Set \r\n End Property \r\n \r\n
Na string acima temos:
- '\r\n' usado para quebrar o texto para aproxima linha;
- '\(', '\)', '\.' como os caracteres parenteses tem significado em expressões regulares temos que colocar uma barra antes para que sejam tratados como texto comum;
- '\1', '\2' usado para fazer a substituição do que foi encontrado da expressão regular seguindo a mesma ordem da declaração. No nosso exemplo duas cadeias de texto que selecionamos usando (.*), a primeira é o nome e a segunda é o tipo.
Dentro do Notepad++ basta colar as duas strings e marcar a opção de expressão regular na tela de pesquisa (ctrl+h).
Pressione substituir todos e voila:
O exemplo que eu usei foi bem foi bem trivial, apenas para exemplificar. Mas conforme você vai usando acaba percebendo em quantas situações esse procedimento se enquadra para facilitar nossa vida. Outro ponto que quero salientar é que apesar de eu ter usado o Notepad++ no exemplo outros editores de texto voltado para programadores também tem a opção de substituição usando expressões regulares.
Nas ultimas semanas tenho me dedicado a leitura do livro "O Programador Apaixonado". Quero deixar bem claro que essa não é uma crítica, nem um review é uma indicação mesmo. Estou adorando o livro e indico para qualquer programador, que foca não só nas tecnologias X,Y,Z mas também em sua carreira.
Quando eu digo me dedicado a leitura estou realmente querendo utilizar a palavra dedicado. Isto porque o livro é dividido em capítulos pequenos e no final de cada um existe um pequeno 'exercício' que força o leitor a pensar e adotar novos hábitos.
Os capítulos são bem concisos e focados em tópicos específicos, isso possibilita uma ótima leitura para quem tem pouco tempo. Possibilitando também você sempre manter esse livro ao alcance da mão para ler algum capítulo aleatório e não se desviar dos objetivos da sua carreira.
Se você utiliza CSS diariamente deve gostar de como ele facilita sua vida e ajuda na manutenção do layout da sua aplicação. Embora ele seja uma tecnologia fantástica ainda existem pontos de melhoras, e para isso existem algumas ferramentas sendo uma delas o LESS. Nesse artigo vamos ver algumas das funcionalidades dessa ferramenta.
O que é o LESS?
O LESS é um preprocessador de CSS, ou seja, você escreve seu CSS utlizando as funcionalidades do LESS e ele transforma seu código em CSS para que o navegador 'entenda'.
Como utilizar o LESS?
Abaixo está um exemplo de como utlizar o LESS diretamente no html.
Se você utiliza o Visual studio então existe uma outra forma que é instalar o Web Essentials
Vamos conhecer as funcionalidades principais do LESS:
Variáveis
Sim, você leu certo variáveis!
Assim como em programação você pode definir variáveis e reutiliza-las em todo o CSS, desta forma se for necessário mudar o valor você pode fazer isso em apenas um lugar.
@corPrincipal: #5B83AD; /* Declaração da variável */
#header {
color: @corPrincipal; /* Utilização da variável */
}
Reutilização de código
É possível declarar estilos no formato de classe CSS e retuliza-los:
.bordaPadrao { /* Definindo estilo a ser reutilizado */
border: 1px solid black;
}
#imagem{
.bordaPadrao; /* Reutilizando 1 */
}
.quadroDestaque {
color: red;
.bordaPadrao; /* Reutilizando 2 */
}
Hierarquia
Com o LESS você pode definir uma hiearquia mais clara no css. Por exemplo observe o código abaixo:
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
O código acima pode ser traduzido para a seguinte forma:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
Muito mais legível e organizado.
Conclusão
Além das funcionalidades que eu aprentei aqui ainda existem outras que podem ser encontradas no site oficial: http://lesscss.org/features/
.png)
