Arquivo da tag: javaspirit

AngularJS – futucada inicial

Faz um tempinho que dei uma futucada no AngularJS no Code School (os cursos lá são práticos e rápidos, para ter uma base é ótimo #ficadica).
Logo que comecei a fazer alguns sites mais interativos, com algumas requisições AJAX, senti falta de algo que fizesse a gente visualizar o que estava modificando o HTML em runtime, porque, quando você pega uns projetos que rola uns churros.js que está com todo o código do projeto, o choro é livre. Então, achei sensacional a idéia de “javascript declarativo” no HTML, batendo o olho rapidamente dá para imaginar como está o JavaScript e tudo mais, sem contar que minimiza a possibilidade de caos.

A principio o que eu achei maaaaaaaais legalzão foi o “Data Binding de mão dupla”. Vamos à um exemplício para despertar a curiosidade:

<!DOCTYPE html>
<html ng-app="exemplicio">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="angular.min.js"></script>
		<script type="text/javascript">
			(function() {
				var app = angular.module('exemplicio', [])
 
				app.controller("MusicaController", function(){
					this.musicas = sonho_medio;
 
					this.altera_musicas = function() {
						if (this.musicas == queen_is_dead) {
							this.musicas = sonho_medio;
						} else {
							this.musicas = queen_is_dead;
						}
					};
				});
 
				var sonho_medio = [
					{ titulo: 'Escapando', artista: 'Dead Fish' },
					{ titulo: 'Sobre a violência', artista: 'Dead Fish' },
					{ titulo: 'Modificar', artista: 'Dead Fish' },
					{ titulo: 'Paz verde', artista: 'Dead Fish' },
					{ titulo: 'Mulheres negras', artista: 'Dead Fish' },
					{ titulo: 'Sonho médio', artista: 'Dead Fish' },
					{ titulo: 'Por paz', artista: 'Dead Fish' },
					{ titulo: 'Fragmentos de um conflito iminente', artista: 'Dead Fish' },
					{ titulo: 'Hoje', artista: 'Dead Fish' },
					{ titulo: 'Cidadão padrão', artista: 'Dead Fish' },
					{ titulo: 'Sua bandeira', artista: 'Dead Fish' },
					{ titulo: 'Canção para amigos', artista: 'Dead Fish' },
					{ titulo: 'Damn\' Lie', artista: 'Dead Fish' },
					{ titulo: 'Lost Soul', artista: 'Dead Fish' }
				];
 
				var queen_is_dead = [
					{ titulo: 'The queen is dead', artista: 'The Smiths' },
					{ titulo: 'Frankly, Mr. Shankly', artista: 'The Smiths' },
					{ titulo: 'I know it\'s over', artista: 'The Smiths' },
					{ titulo: 'Never had no one ever', artista: 'The Smiths' },
					{ titulo: 'Cemetary gates', artista: 'The Smiths' },
					{ titulo: 'Bigmouth strikes again', artista: 'The Smiths' },
					{ titulo: 'The boy with the thorn in his side', artista: 'The Smiths' },
					{ titulo: 'Vicar in a tutu', artista: 'The Smiths' },
					{ titulo: 'There is a light that never goes out', artista: 'The Smiths' },
					{ titulo: 'Some girls are bigger than others', artista: 'The Smiths' }
				];
			})();
		</script>
	</head>
	<body ng-controller="MusicaController as musicaCtrl">
		<ul>
			<li ng-repeat="musica in musicaCtrl.musicas">
				{{musica.titulo}} - {{musica.artista}}
			</li>
		</ul>
 
		<input type="button" value="Alterar músicas" ng-click="musicaCtrl.altera_musicas()" />
	</body>
</html>

Alterando o altera_musicas para sua paginação chamando sua API Rest, é coisa linda.
Estou utilizando ele em algumas páginas de um projeto que comecei em Dezembro e até agora está supimpão. Vai que é sucesso!

P.S.: Lembrando que não é solução de tudo na vida. Tenha bom senso no uso, sempre!

Settimeout e cleartimeout para um trilhão de utilidades

Tô temporariamente quase full time como dev front-end. Tenho muito a melhorar nisso ainda, rs.

Tava fazendo um formulario com muita validação chatinha em runtime e precisava rolar no server. Usei bonitamente o evento change dos inputs/selects para fazer a validação, com ajax.
Acontece que, nos inputs text o evento change era chamado 93248 vezes, fazendo varias chamadas no server e fazendo uma validação tosca. Delay. Tava péssimo.

Conversei com meu irmão, que é master of puppets em javascript, e ele sugeriu que colocasse a chamada ajax para validação em um settimeout de 1s e limpasse sempre que digitasse. Ou sejam: depois de 1s sem digitar que iriamos fazer a validação. Rolou. Olha essa belezura:

var validacaoTime = null;
$("input").keypress(function() {
    clearTimeout(validacaoTime);
    validacaoTime = setTimeout(function() {
        alert('VALIDACAO');
    }, 1000);
});

O focusout não era bacana pois eu dependeria do usuario sair do campo para conseguir validar.

Como é uma aplicação de usuarios que muito provavelmente digitam rápido, a idéia cai bem.
Depois faço um teste real com a minha mãe catando milho para ver um tempo médio para próximos projetos, rs!

Não esqueçam de validar no submit também! 🙂

Placeholder no select

Tem nada mais munito que aqueles formularios a la Twitter, com o nome dos campos dentro do input.
Todo mundo usa! Tá na moda tá na C&a. Ainda mais que agora é nativo no HTML5 e bibibi.
E os plugins para funcionar em browsers antigos ae são mamão com açucar.

Só tem UM problema. O cliente vai te pedir o placeholder no select, e lá.. lá o maledeto não funfa.
Fiz pog, observem..

O “placeholder” vai ser uma opção default:

<select id="opcoes" name="opcoes">
     <option value="" default class="select-default">Instituição</option>
</select>

E quando o select for aberto, a opção não será visualizada:

select.placeholder-select {
    color: #999;
}
 
select .select-default {
    display: none;
}

Essa opção default vai ter cor de placeholder, acinzentado, pela classe que colocamos no javascript (o estilo está acima):

$(function() {
      $("select").change(function () {
                $(this).removeClass('placeholder-select');
                if ($(this).val() == '') {
                    $(this).addClass('placeholder-select');
                }
            }).click(function () {
                $(this).removeClass('placeholder-select');
            }).focusout(function () {
                $(this).change();
        });
});

E vualáá!

[RESOLVED] IFrame com dominios/subdominios distintos bloqueado

Quem nunca fez um iframe que modifica a pagina pai com client-side scripting? Quem nunca? HAHAHAHA

Tava fazendo isso atualmente, porem as telas eram de projetos distintos. O que acarretou alguns problemas, já que o navegador barra esses acessos inter-dominios.

Bom, a primeiro momento acho que não é possivel entre dominios diferentes mesmo. Mas sempre temos a solução de criar um subdominio em um dos projetos e apontar pro projeto amiguinho para fazer essa execução com sucessão!
Apesar de um subdominio estar no mesmo dominio (nao diga), o javascript interpreta um sub como o dominio, testa aí em algum lugar:

Só que aí podemos setar o dominio, sem o sub, no javascript. Isso se for um sufixo. Tipo:

document.domain = "leticiaverta.com";

Faz nos dois subdominio e tcharan! Agora eles são possíveis “conversadores”!

Uma bitoca!

Ajudando o @unaghii – Part JavaScript

Victao bundudo tava precisando gerar um .zip a partir de imagens que já estão sendo exibidas na tela. Só pra baixar tudo de uma vez mesmo. Usamos o JSZip, funfa nice, o único problema é que se for muito dado a probabilidade do browser do usuário travar é absurda. Enfim, vai que ajuda alguem, segue.

var zip = new JSZip();	
var contador = 1;
 
//Pega todas as imagens
$(".imagens-malucas").each(function() {
	//Converte para base64
	var imagemBase64 = getBase64Image($(this)[0]);
 
	//Adicionar o arquivo no zip
	zip.file("teste" + contador + ".jpg", imagemBase64, {base64: true});
 
	contador = contador + 1;
});
 
//Gera o zip		
var content = zip.generate();
 
//Força o download
location.href="data:application/zip;base64,"+content;

E a função que converte um img em base64

function getBase64Image(imgage) {
	var canvas = document.createElement("canvas");
	canvas.width = imgage.width;
	canvas.height = imgage.height;
 
	var ctx = canvas.getContext("2d");
	ctx.drawImage(imgage, 0, 0);
 
	var dataURL = canvas.toDataURL("image/png");
	return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

jQuery – Plugins que mais uso

Cara, não tem jeito. Toda vez que vou fazer uma mascara e o masked input não me atende é uma baita briga para achar um código legalzinho. jQuery tá com bastante plugin mas tem uns trampo trash largado por ai. Segue os plugins que mais uso para ajudar minha memoria e, de quebra, já compartilhar, share 4 life.

Masked input
> Máscaras para input onde você define a mesma (ceps, telefones, etc) . Muito fácil.

No masked input eu sinto falta de uma máscara numérica que eu não precisa definir o tamanho. Supri tal falta com o autoNumeric.
> Máscaras numéricas, suporta todos os formatos possiveis (já que você que configura, rá).

Lightbox
> Slideshow de imagem, box flutuante para visualização de imagem. Pura lindeza!

No lightbox eu sinto falta de um box para conteudos html, suprido (marromeno) por clearbox.
> Faz o mesmo que o lightbox, box flutuante pro seu site ficar bacanudo, só que conteudos diversos, links, videos do youtube, etc.

FileUploader – Multiplos uploads sem flash (!!)

Quem nunca ficou doido atrás de um fileupload multiplo, assincrono, mindfucker e só achou gambeta com flash e uns pluguinhos js tabajara que atire a primeira pedra!
Fica aqui minha indicação de uma boa solution .. ele monta um formzin multipart para cada arquivo e faz um post, simples como a vida.

http://valums.com/ajax-upload/
(Não esqueça da jquery)

Unica coisa chata que eu vi, que nem sei se tem a ver com o pluginho e ainda nao deu tempo de pesquisar, é que pelo IE o arquivo chega no server pelo “Request.Files” e no Firefox pelo “Request.InputStream” .. de resto, é nice!

AWAY!