Olá caros leitores, no post de hoje falaremos sobre “Code Snippets” em tradução livre “Trechos de Código”, um conceito que vem crescendo bastante à medida que o mercado exige mais agilidade e rapidez de seus funcionários.

No ultimo post falei um pouco sobre o que aconteceu no “Workshop Front-End Egineering em Escala Global” realizado no ultimo dia 15 de Janeiro em Recife – PE, pois bem, seguindo o conselho do mestre Berg Brandt, Front-End da Yahoo, estudei a fundo as técnicas empregadas com esse sistema de desenvolvimento e tive algumas oportunidades de colocá-las em pratica, e durante minha escalada em busca de mais conteúdo relacionado ao assunto fui apresentado ao “Css-Tricks.com/Snippets”, um repositório repleto de códigos de uso comum entre desenvolvedores e programadores web, que pelo menos para mim esta sendo um prato cheiro.

O site dispõe de centenas de trechos de códigos organizados por categorias:

• CSS
• HTAccess
• HTML
• JavaScript
• jQuery
• PHP
• WordPress

Este magnífico repositório conta com desde códigos como a “Estrutura simples de um documento XHTML Strict” ate “Efeitos de Acordeom” usando jQuery, confira alguns exemplos:

CSS Snippets – PNG Hack/Fix para IE6

Background-images

.yourselector {

width:200px;

height:100px;

background: url(/folder/yourimage.png) no-repeat;

_background:none;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/folder/yourimage.png’,sizingMethod=’crop’);

}

Inline images

img, .png {

position: relative;

behavior: expression((this.runtimeStyle.behavior=”none”)&&(this.pngSet?this.pngSet=true:(this.nodeName == “IMG” && this.src.toLowerCase().indexOf(‘.png’)>-1?(this.runtimeStyle.backgroundImage = “none”,

this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.src + “‘, sizingMethod=’image’)”,

this.src = “images/transparent.gif”):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(‘url(“‘,”).replace(‘”)’,”),

this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.origBg + “‘, sizingMethod=’crop’)”,

this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true));

}

jQuery Snippets – Fixing IE z-index

Com jQuery

$(function() {

var zIndexNumber = 1000;

// Put your target element(s) in the selector below!

$(“div”).each(function() {

$(this).css(‘zIndex’, zIndexNumber);

zIndexNumber -= 10;

});

});

Com MoonTools

if(Browser.Engine.trident){

var zIndexNumber = 1000;

// Put your target element(s) in the selector below!

$$(‘div’).each(function(el,i){

el.setStyle(‘z-index’,zIndexNumber);

zIndexNumber -= 10;

});

};

Esses são apenas dois exemplos de Code Snippets, como eu disse antes dentro do site você encontrará diversos outros códigos que com certeza serão de grande ajuda em seus projetos, pois você irá economizar grande parte de seu tempo simplesmente reciclando o código.

Espero que gostem da dica e aproveitem bastante esse site, pois isso é conteúdo raro e dificilmente você encontrará algo parecido e grátis. Um Abraço!

Endereço: http://css-tricks.com/snippets/
Criador: Chris Coyer

O trabalho de um programador front-end é um desafio. Nosso trabalho não é uma das regras, mas de recomendações e melhores práticas. Com cada projeto, tentamos melhorar nossas habilidades e esperamos ficar melhores no que fazemos, mas o caminho para o sucesso nem sempre é muito claro. Podemos aprender muito com nossos erros do passado, mas dicas de como melhorar a nós mesmos podem ser igualmente estimulantes. Este artigo irá dizer-lhe por onde começar.

Como definir a qualidade:
Se você já teve que julgar o código de alguém que você já deve saber o quão difícil é colocar uma espécie de grade sobre ele. Não só por causa das diferenças de estilos de codificação, mas também porque a qualidade do código final pode não estar a altura de sua face. A maneira mais rápida para julgar é dar uma olhada no código fonte do HTML, CSS e JavaScript, isso irá dizer-lhe muito.
Não estou muito interessado em definir uma escala de classificação, uma vez que é completamente impossível de qualquer maneira. Eu acho que é mais importante para definir que áreas e escopos existem para definir a qualidade do código front-end. Na minha experiência, existem quatro níveis importantes que precisam ser levados em consideração. Vou começar com o mais fácil e a mais simples, trabalhando a minha maneira.

1. Criando uma página:
Eis onde começa tudo. Você faz ou recebe um projeto, sente-se na frente de seu computador, você escolhe seu navegador favorito e começa a trabalhar. Escrever um HTML, CSS e JavaScript para combinar com um design funcional é um desafio no início. Como um não-designer que me levou algum tempo para entender as delícias de um bom design e de traduzir os para uma página da web. Por outro lado, esta é provavelmente a parte mais fácil do trabalho.
Para além das questões de design, você também tem que se preocupar sobre como escrever um código válido e você tem que ter certeza que sua página é acessível a pessoas que não utilizam navegadores regulares. Para a maioria das pessoas isso vai abrir portas para um mundo novo e desconhecido, mas é essencial dar uma qualidade global ao seu código.
Verificar a qualidade deste primeiro nível é bastante fácil. Validadores de código, uma rápida olhada em toda a fonte e rapidamente a digitalização da página com CSS desabilitado irá dizer-lhe muito. Mas claro, isso é só o começo.

2. Fazendo um trabalho de cross-browser e cross-platform:
Tempo para diminuir o zoom. Fazer uma única página para trabalhar em seu navegador favorito é uma coisa, ter certeza que ele funciona bem em uma variedade de navegadores e sistemas operacionais é um desafio completamente diferente. Primeiro de tudo, é importante notar que não é necessário que a página apareca exatamente do mesmo jeito em todos os navegadores. Para navegadores mais antigos, basta fazer o olhar e trabalhar bem, só que sem as coisas extravagantes. É importante certificar-se de que todas as funcionalidades ainda estejam lá. Sacrificar a funcionalidade essencial não é simplesmente feito.
Normalmente se preocupar com a compatibilidade do navegador é algo que acontece depois, mas é realmente importante ter isso em mente quando você começa em um projeto. Algumas técnicas funcionam melhor que outras, alguns problemas são mais fáceis de resolver do que outros. A escolha de um navegadorfuncional é muito importante de inicio. Conhecendo as entradas e saídas de navegadores e mudar um pouco o seu curso de código para afastar das grandes questões é um processo longo e cansativo, mas ajuda a melhorar a qualidade do seu código, um grande negócio.
Medir a qualidade real deste nível é um pouco mais difícil, embora o comprimento do navegador na fase de testes é uma boa indicação disto. Quando mais cedo você começa, mais fácil será para resolver os problemas do navegador, a realização destas terefas farão com que todos os browsers mostrem a página em uma forma aceitável. Mas, mesmo assim, alguns erros extremamente obscuros podem mantê-lo acordado a noite toda (ou a semana toda).

3. fazer um site:
Tempo para diminuir o zoom, mais uma vez. Um site é mais do que uma simples coleção de páginas. Você notará que vários componentes serão apresentados em páginas diferentes dentro do site, você vai notar também que arquivos CSS e JavaScript será utilizado em várias páginas dentro do site. Manter seu código consistente em todas as páginas pode ser muito mais difícil do que você imaginava.
A chave é pensar em componentes. HTML é uma linguagem descritiva, de forma independente da visualização ou do contexto, um bloco de “determinados conteúdos” deve sempre ser construído usando o html mesmo. Um exemplo que eu gosto de usar é o de um artigo de notícias. Isto pode aparecer em um bloco de focos separados, em uma lista resumida, como um resultado de pesquisa ou como um todo em uma página de detalhes. Basicamente é sempre a mesma coisa (um artigo de notícia), para a parte semântica do HTML (também acho que nomes de classes) devem ser os mesmos para todas essas instâncias. Variações no projeto devem ser baseados no contexto, pela definição de variantes (adicionando uma classe base extra para a diferenciação). Uma vez que você tem tudo isso coberto, a escrita correta do CSS e JavaScript deve ser muito mais fácil e a duplicação de código será reduzida.
Este nível é bastante fácil de controlar. Basta tomar algumas páginas de um site, destacar alguns componentes com variantes de design claro e verificar como são construídos e decorados. Se não houver uma base comum, esta certamente irá afetar a qualidade do seu site a longo prazo.

4. estabilidade e flexibilidade:
Os três níveis acima são todos importantes, mas, mesmo combinados todos os três critérios, a qualidade do seu código ainda pode ser bastante duvidosa. Seu código só será realmente brilhante quando ele se mostra estável e flexível. O problema é que você pode apenas usar esta medida quando se é efetivamente demasiado. Você pode olhar para vários indicadores embora.
O primeiro é quando você estiver chegado ao ponto de “os 5 últimos bugs”. Estas são alterações de última hora ou bugs com prioridade ligeiramente mais baixa que você adia porque eles são muito difíceis de corrigir. Você sabe que fez um bom trabalho quando você pode eliminá-los rapidamente. Por outro lado, se a fixação desses erros introduz novos ou requer retrabalhos de seções completas, ainda há muito espaço para melhorias.
Outro bom indicador é a “fase 2″. Como você está bem preparado para incorporar as alterações de design funcional sem arruinar seu site. Você pode deixar cair um componente existente em outro lugar sem ter que refazer todo o css? Você pode fazer a sua coluna da esquerda mais adaptando o mínimo de valores CSS e sem qualquer images recutting? Você pode criar uma variante de concepção de um componente sem ter que entregar o código HTML novo? Como é que fácil trocar de lugar com os componentes? O que se mede uma trilha de duas linhas? Todos estes elementos são indicadores da estabilidade e flexibilidade de seu código.

Conclusão:
Se o nível de qualidade alcançado for 4, sua missão não foi cumprida, pode custar-lhe muito tempo, esforço e dinheiro. Perguntas simples de seu cliente teram que ser respondida por respostas técnicas complicadas, seu cliente realmente não importa. Levará a horas extras, prazos não cumpridos, o estresse e um declínio na relação com seu cliente.
É um sério processo de aprendizagem que, como flexibilidade e estabilidade são apenas alcançados por dominar os 3 primeiros níveis e evoluir a partir daí. Se você quer melhorar suas habilidades, olhar para tráz e rever seu conceitos são uma boa dica. Veja onde você escorregou e pense em maneiras de se certificar de que não acontecerá novamente. Se você fizer isso com cada projeto, o céu é o limite.

Este artigo é uma tradução, o documento original pode ser encontrado em: front-end quality levels (http://www.onderhond.com/blog/work/front-end-quality-levels)

A utilização da Semântica no Javascript pode e deverá ser um grande diferencial num futuro bem próximo, com a popularização de termos como a própia Semântica e Acessibilidade o mercado vem exigindo cada vez mais o uso dessas técnicas no desenvolvimento de projetos considerados “globais”, o que não significa que estou falando dos funcionários da Rede Globo de Televisão, global pode ser definido como algo que está acessível para tudo e para todos, resumindo, o uso dessas técnicas é algo imprescindível o mercado web de hoje e não como há 10 anos atrás.

Semântica, pode ser definido como: a realização de algo utilizando um padrão formal.
Essa forma de organização pode ser aplicado a praticamente qualquer coisa, agora estamos falando de “Web Semântica”, ou seja, uma web mais organizada e formal, quando falamos em web formal a primeira coisa que vem a cabeça e a “Web Certinha” certo? Errado, uma web formal não quer dizer que o seu conteúdo precisar ser “certinho”, a semântica é aplicada na estrutura dos códigos que escrevemos.

Exemplo:

<script type="text/javascript" src="arq_externo.js" />

Este é um exemplo Semântico de inserirmos JavaScript em uma página HTML, esta mesma forma pode ser utilizada para inserir CSS em uma página, para isso basta modificar o atributo “type” para “text/css” e “src” para “nomedoarq.css” Um exemplo valido mais não semântico de inserir JS em uma página é a seguinte:

<script type="text/javascript">

// códigos javascript

</script>

Scripts estruturados desta forma podem ser encontrados em diversos web sites antigos e em alguns novos também, já que para muita gente ainda não caiu à ficha.

Tag “noscript”

<script type="text/javascript">

alert(“JavaScript habilitado e funcionando corretamente”)

</script>

Está tag nos permite disponibilizar conteúdo para browsers que não possuam ou estejam com o JS desativado.

Exemplo:

<noscript>

<p>JavaScript não instalado ou desabilitado!</p>

</noscript>

Neste exemplo será exibida uma mensagem na tela do usuário com a seguinte texto “JavaScript habilitado e funcionando corretamente”, isso caso ele esteja com o JS estável, caso contrário será exibida uma mensagem como texto normal dizendo que o “JavaScript não instalado ou desabilitado!”.

Comentários

Igualmente as outras linguagens, no JS os comentários são usados para explicar a funcionalidade do comando abaixo ou acima dele executado, existem duas forma de comentário, // = comentários de uma única linha, e /**/ = comentários de múltiplas linhas.

Exemplo:

<script type="text/javascript">

// comentário de uma única linha 

/* comentário de multiplas linhas 	*/

</script>

Caso você use JavaScript in-line é essencial o uso de comentários HTML, browsers mais antigos que não suportam JS iram exibir todo o seu código JS como se fizesse parte do conteúdo, a não ser que… você declare os códigos JS dentro de comentários HTML.

Exemplo:

<script type="text/javascript">

< !—// 

Códigos JavaScript

//-->

</script>

“Mais não existem essas duas barras // nos comentários HTML”, bem, não mais no JS é preciso que elas sejam declaradas. Por que? Isso impede o interpretador JS as interprete.

Algo também muito importante no JavaScript é o ; (ponto e virgula), a utilização do ; é quase opcional, sim é quase por que em alguns casos há não utilização dos caracteres pode causar o não funcionamento de seu código, caso você vá declarar mais de um elemento de código na mesma linha é necessário que você use o ; (ponto e virgula).

Uma Internet acessível a tudo e a todos, isso pode parecer exagero da minha parte, mais se você é um desenvolvedor sabe que além dos usuários comuns a rede é composta por diversos sistemas que fazem reconhecimento automático de nossas aplicações, caso o nosso sistema não esteja bem estruturado o mesmo não será reconhecido pelos robôs da web, por outro lado a inclusão digital, inclusive para deficientes (físicos, visuais e etc.) que estão cada vez mais entrando na era digital, hoje com a popularização de softwares e hardwares específicos para a categoria, cresce a demanda por aplicativos web com o mesmo nível de acessibilidade, existem hoje casos em que a os própios deficientes estão desenvolvendo aplicações desktop e web, há algum tempo conheci um site criado por um deficiente visual, mais no momento nem o nome nem a URL me vem a mente.

Bem espero ter ajudado com esse artigo, qual quer duvida, critica ou elogio deixe um comentário ou entre em contato! Abraço.

(Aviso! Caso haja algum erro de Português não se importe, como a filha da Xuxa eu fui alfabetisado em ingreis.)

DaSilva, Primeiro Avaliador de Acessibilidade em Português para Websites.