CategoryCSS

Artigos e códigos interessantes em CSS

Separação de camadas no FrontEnd

Separar a VIEW do MODEL e não misturar as regras de negócio com os CONTROLERs há muito tempo já fazem parte das preocupações e boas práticas adotadas pelos programadores back end, mas e dos desenvolvedores frontend ?

A separação de camadas onde cada componente possui uma responsabilidade bem definida, também deve ser preocupação dos desenvolvedores frontend. As vezes as coisas ficam um pouco confusas, e então frequentemente vemos projetos em que está tudo misturado, trocado e até mal aplicado.
Continue reading

FadeIn e FadeOut com css 3

Um pouco de mágica hoje. Já estamos mais do que acostumados a usar as funções $el.fadeIn() e $el.fadeOut(), nativas do jQuery, para fazer os efeitos de fadeIn e fadeOut. Que nada mais é, do que aquela transição suave de uma imagem opaca, para um “nada”.

Em css, isso é representado pela propriedade opacity.

Mas estou aqui hoje para lhes contar que não é mais necessário isso nos dias de hoje.
A especificação css3, trouxe uma nova propriedade chamada transition. E ela faz milagres, se formos pensar na complexidade e performance do código javascript equivalente que temos que escrever para chegar no mesmo resultado.

É tudo bem simples. Dado uma outra propridade, com valores numéricos, como width, height, opacity, left, top… o transition faz uma transição suave entre 2 valores. Essa propriedade css aceita um tempo em segundos do quanto “o efeito” irá demorar para acabar.

Exemplo

<img src="http://www.clipartsegifs.com.br/cliparts/variados/garfield/garfield_02.jpg" id="img-fade" />
<button id="btn-fade">FadeOut</button>

<style>
#img-fade { transition: 2s; }
.fade-out { opacity: 0; }
.fade-in { opacity: 1; }
</style>

<script>
var id = function(el) {
	return document.getElementById( el );
}
var $btn = id('btn-fade'),
	$img = id('img-fade');

$btn.onclick = function(){
	var $this = this;


	if( $img.className ==='fade-out' ){
		$img.className = 'fade-in';
		$this.innerHTML = 'FadeOut';
	} else {
		$img.className = 'fade-out';
		$this.innerHTML = 'FadeIn';
	}
}
</script>

É isso, já usou ? comente.

Otimizações para websites não óbvias

A minha idéia nesse post, é apenas fazer uma listagem de otimizações em sites não óbvias. Ir um pouco além do que vemos por ai, e fazer um apanhado de tudo.

Bem rápido, por isso que vai ser em formato de lista.

Imagens

  • Usar sprites
  • Passar imagens pelo SmushIt
  • Declarar as dimensões das imagens no html
  • Usar imagens em base 64
  • Preferir extesões .jpg e .gif(no lugar de png)
  • Usar patterns pequenos nos repeats
  • Usar backgrounds otimizados com media queries

Evitar Imagens

  • Usar códigos para degradês e bordas redondas

Evitar

  • Evitar requisições inválidas

JavaScript

  • Arquivos js no final da página
  • Carregar js de modo assincrono
  • Cache de variaveis
  • Carregar youtube, twitter e facebook via ajax
  • Carregar modais e tooltips via ajax

CSS

  • Evitar regras css com virgulas nos seletores

Talvez

  • Talvez até simplificar o layout, removendo alguma sombra que não cause muita diferença visual, mas estava pesando na implementação
  • Evitar jQuery e plugins de terceiros

Ferramentas

  • Usar ySlow
  • Usar PageSpeed
  • Merge e minify de css, js e html
  • Validar w3c html, css
  • Validar link checker

Servidor

  • Usar mod_deflate e mod_expires

Meu boilerplate de projetos de sites html5 e mobile

Passando aqui apenas para compartilhar um novo repositório que acabei de criar no meu github.

https://github.com/wbruno/boilerplate-front

Sabe quando você já fez centenas de sites, já deu manutenção em dezenas, e já começou toda uma estrutura de pastas/arquivos centenas de vezes?

Pois é, também passei por isso. E finalmente criei coragem e vergonha na cara para criar esse repo.
Coloquei lá os arquivos mínimos dos meus projetos em html5 e responsivos de hoje em dia.

Tem horas de estudos acumulados nesse projeto, e horas de leituras sobre otimizações, além de já incluir outro projeto meu, que é o Column.GS, um sistema de grid 960px, responsivo e semântico.

É isso, espero que usem, testem e enviem seus pull requests. =)

Column.GS – Um sistema de grid css 960 com significado e para FrontEnds

Criei esse sistema de GRID css de 12 colunas, para atender uma necessidade que tive durante o recorte de páginas de um site.
Continue reading