jQuery

JsBin – Playground para Html,CSS e JS


Algo que tenho gostado muito de utilizar nos últimos dias é o JsBin, um playground para testar snippets de HTML, Javascript e CSS.

O bacana é que conseguimos adicionar bibliotecas conhecidas como jQuery, Angular, React.

Você consegue salvar seus snippets e também compartilhar com outras pessoas.

É bem prático, pois você não precisa montar um ambiente todo para testar apenas um pequeno cenário e acaba ajudando bastante no dia-a-dia.


Disse-lhe Jesus: Eu sou o caminho, e a verdade e a vida; ninguém vem ao Pai, senão por mim. João 14:6

Anúncios

Inserindo valores padrões com jQuery.ajaxSetup

Uma dica interessante mas que deve ser usada com cautela é o jQuery.ajaxSetup. Com ele nós conseguimos configurar valores padrões para futuras requisições Ajax, quando eu digo para usar com cautela é que por padrão podemos injetar valores em nossas requisições e outros desenvolvedores podem não notar, fazendo talvez injeções de valores não desejáveis para outras requisições, isso não sou eu que estou dizendo, é a própria documentação do jQuery :P.

Description: Set default values for future Ajax requests. Its use is not recommended.

Usando um exemplo da própria documentação, podemos configurar que todas requisições ajax serão para a url ping.php. Para isso basta usar a seguinte sintaxe:

$.ajaxSetup({
  url: "ping.php"
});

A partir disso, caso a gente faça uma request com o ajax, mesmo que não informarmos a url, como ela foi configurada como default no ajaxSetup o valor é injetado.

$.ajax({
  data: { "name": "Dan" }
});

Isso pode ser útil caso você sempre faça chamadas para uma mesma URL, ou precise configurar algum cabeçalho (header) padrão.

Usem com moderação ;).

A documentação pode visualizada neste link.


Por isso não sejais insensatos, mas entendei qual seja a vontade do Senhor. Efésios 5:17

Conheça o Blisk: Um navegador voltado para desenvolvedores

Imagina unir o desempenho do Chromium com as funcionalidades de desenvolvedor que o FirefoxDeveloper fornece.

Esse é o Blisk, um navegador totalmente voltado para desenvolvedores. Com ele você desenvolve e testa seus websites em qualquer tipo de dispositivo.

Segue seus principais recursos:

  • Emula os mais variados tipos de smartphones e tablets
  • A URL e scroll do mobile e desktop são sincronizados
  • Blisk atualiza a página automaticamente quando o código fonte é alterado.
  • É possível debugar desktop e mobile com as DevTools
  • Blisk funciona com qualquer IDE, linguagem e framework.

Para quem tiver interesse: blisk.io


Assim diz o Senhor DEUS, que congrega os dispersos de Israel: Ainda ajuntarei outros aos que já se lhe ajuntaram. Isaías 56:8

Obtendo paleta de cores com Color Thief

Uma dica bem legal é para obter a paleta de cores de uma imagem, para isso conheci o framework Color Thief, que apenas com JS faz essa extração dessas informações de uma imagem.

Sua utilização é bem simples. Veja o exemplo abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js'></script>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.0.1/color-thief.min.js' ></script>
    <script type='text/javascript'>
        jQuery(document).ready(function(){
            var myImage = this.querySelector('#myImg');
            var colorThief = new ColorThief();
            var colors = colorThief.getPalette(myImage);
            
            for(var k =0; k < colors.length; k++){
                cor = colors[k];
                console.log(cor);
                var pal = $("<div/>");
                pal.css('width', '50px').css('height', '50px');
                pal.css('background-color', 'rgb('+cor[0]+', '+cor[1]+', '+cor[2]+')');
                $('#colors').append(pal);
            }
        });
    </script>

</head>
<body>
    <img id='myImg' width="500" height="400" src='gb.jpg' />
    <div id='colors'></div>
</body>
</html>

Com o método querySelector obtemos a imagem em nosso DOM, após isso instanciamos o objeto ColorThief e assim utilizamos o método getPalette que traz todas as cores encontradas na imagem.

Em seguida fazemos um loop nas cores retornadas e criamos um elemento div para cada cor usando jQuery, dentro da div alteramos as cores do background com o que é retornado  pelo método getPalette.

Também da para obter a cor principal de uma imagem com o método getColor(image).

O resultado é esse:

color-thief

Bem útil quando temos que editar a cor de uma tela de acordo com a imagem subida por um usuário, achei bem legal e resolvi compartilhar.


O que faz justiça aos oprimidos, o que dá pão aos famintos. O Senhor solta os encarcerados. Salmos 146:7

Gerando PDF com jsPDF

Recentemente eu conheci o plugin jsPDF, feito totalmente em JavaScript ele permite a geração de PDF totalmente do lado do cliente baseado em jQuery.

A utilização dele é bem simples :

var doc = new jsPDF();

doc.setFontSize(40);
doc.text(40, 30, "Teste PDF", 0);

Veja o resultado :

2016-09-23_1536

O plugin também permite que você converta um html em pdf fazendo com que a geração do documento seja feito de maneira bem mais simples.

Você pode encontrar as demais funcionalidades do plugin e sua documentação em seu site: http://bit.ly/1yk7mjF.


E nós conhecemos, e cremos no amor que Deus nos tem. Deus é amor; e quem está em amor está em Deus, e Deus nele. 1 João 4:16

Enviando formulários com Ajax

Recentemente precisei enviar um form via Ajax e não foi possível usar a função nativa do jQuery pela necessidade de enviar imagens junto com os dados do meu formulário. Foi ai que conheci o framework jQuery Ajax Form.  Com ele é muito simples enviar um formulário via Ajax para o servidor, basta baixar o plugin no link destacado anteriormente, anexar ao seu projeto (requer jQuery previamente configurado) e seguir o exemplo abaixo.

<form id="myForm" action="comment.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>

Depois, basta selecionarmos o formulário e chamar o método ajaxForm.

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
 
    <script> 
        // espera pelo DOM ser carregado 
        $(document).ready(function() { 
            // faz o bind do nosso formulário e atribui um callback
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script> 
</head> 
...

Rode a aplicação e salve o formulário, o mesmo será processado de maneira assíncrona.

Esse plugin aceita várias opções que podem ser agregadas as chamadas, métodos de callback, configurações da requisição e por aí vai. Essas opções podem ser visualizadas nesse link.


Dá força ao cansado, e multiplica as forças ao que não tem nenhum vigor.
Isaías 40:29

 

Disparando seu próprio evento com jQuery

jquery_logo
Nesse post vou compartilhar algo que aprendi recentemente no jQuery, criar o seu próprio evento. Vamos supor que você queira disparar um evento chamado enterKey toda vez que o seu usuário apertar a tecla enter em um determinado campo.

$('.seuCampo').bind("enterKey",function(e){
   //trate o evento aqui
});
$('.seuCampo').keyup(function(e){
    if(e.keyCode == 13)
    {
        $(this).trigger("enterKey");
    }
});

Primeiro tratamos o evento original (keyup) e dentro dele verificamos se a tecla pressionada é o enter (keyCode == 13), caso ok disparamos o evento enterKey através do método trigger do jQuery.

Para “ouvirmos” esse evento basta utilizarmos o método bind junto com um método de callback que será chamado toda vez que o evento acontecer.

Simples, né ?


Encontraram-me no dia da minha calamidade; porém o Senhor se fez o meu amparo.
2 Samuel 22:19