CategoryHTML

Validando formulários apenas com html5

html5

Validar formulários é chato, tedioso e trabalhoso. Felizmente alguém olhou isso e resolveu incluir dentro da especificação do html, alguns atributos e valores novos muito interessantes.

Se usarmos corretamente, e estudarmos Expressões Regulares, é possível fazer uma validação simples sem escrever nenhuma linha de javascript. Vou deixar abaixo alguns snippets da tag input, utilizando o type correto (veja aqui todos os types novos da html5) e um uso do atributo pattern para os qual eu escrevi algunms ERs.
Continue reading

Fazendo o vim reconhecer uma nova extensão

Boas!

Estou fazendo um projetinho de um site estático em NodeJS com handlebars.
Mas os arquivos partials com extensão .hbs não foram reconhecidos pelo vim como arquivos html. Então, para o highlight funcionar, tive que adicionar o hbs como um html.

Encontrei a resposta nesse link:
Fazendo o vim reconhecer um novo tipo de arquivo pela extensão

vim ~/.vim/filetype.vim

augroup filetypedetect
au BufNewFile,BufRead *.hbs setf html
augroup END

É isso! =)
Vim FTW!

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

Não mostrar site até ter terminado de carregar – JavaScript (loading)

Com js eu escondo o elemento de id=”all”, para depois no evento onload mostrar ele novamente, e ai esconder o gif de loading.

Código bem simples, não, não me orgulho dele. Apenas fiz pq tem outros muito piores por ai, e um cara no iMasters perguntou.

Note que usei 5 wallpapers grandes, para demorar um pouco para carregar, e o efeito ser visto.
Não é obstrutivo, pois escondo com js.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Teste</title>

<script type="text/javascript">
function id(el) {
	return document.getElementById(el);
}
function hide(el) {
	id(el).style.display = 'none';//escondendo tudo
}
window.onload = function() {
	id('all').style.display = 'block';//liberando qndo terminar
	hide('loading');
}
</script>
<style>
#loading { 
	display: block;
	width: 200px;
}
.content { margin: 0 auto; }
#all {
	width: 1280px; overflow: hidden;
}
</style>
</head>
<body>
	<section id="all" class="content">
		<img src="http://fc03.deviantart.net/fs25/f/2009/250/e/5/Within_Temptation___Utopia_by_KigaMistriver.jpg" alt="">
		<img src="http://images.fanpop.com/images/image_uploads/within-temptation-within-temptation-595989_1672_1417.jpg" alt="">
		<img src="http://images4.alphacoders.com/247/247868.gif" alt="">
		<img src="http://www.withinforever.xpg.com.br/within_temptation_wallpaper_3_1024x768.jpg" alt="">
	</section><!-- #all -->

	<img src="http://3.bp.blogspot.com/-Bo2GNAVNb90/URkAlN-0V_I/AAAAAAAACfs/VHFT6oP1ZTk/s1600/Loading+-+Carregando+%252826%2529.gif" alt="" id="loading" class="content"/>


<script type="text/javascript">
	hide('all');
</script>

</body>
</html>

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