Arquivo da tag: front-end

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!

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áá!