jQuery Tips – Dicas de jQuery

Aqui vão algumas dicas que os ninjas do jQuery utilizam em seu dia-a-dia. Na verdade não passam de padrões e boas práticas que nos auxiliam a escrever código mais legível e performático.

Use o seletor Id sempre que possível. Ele é o mais rápido.

Se usar o seletor classe não use com o elemento.

  $("div.products"); //Maus. Lento

  $(".products"); //ok. rápido

Evite fazer essas presepadas:

  $('div.container > *'); //extremamente lento

Ao invés daquilo, faça isto:

  $('div.container').children(); //veloz e furioso. melhor

Isto aqui é rápido:

  $( "#container div.comments" );

Isto é mais rápido:

  $( "#container" ).find( "div.comments" );

Quando se usa $( “#container” ), por baixo dos panos ele está usando document.getElementById(), que é bastante rápido. Lembre-se que o jQuery precisa varrer a árvore do DOM para encontrar a referência aos elementos. Essa busca é meio custosa. Então evite fazer isto:

  $('#outer #inner'); // ruim
  $('div#inner'); // eca
  $('.outer-container #inner'); // o horror!

Evite manipular o DOM. Mas caso precise… A partir da versão 1.4, o jQuery permite remover o elemento do DOM enquanto você o manipula.

  var div = $( "#MyDiv" );
  var parent = div.parent();
 
  div.detach();
 
  // várias pogs aqui
 
  parent.append( div );

Não use funções anônimas para eventos. É difícil de debugar, de testar, de manter.

  $("#myLink").on("click", function(){...}); // isso é maus
  function clicouNoLink(){...}
  $("#myLink").on("click", clicouNoLink); // isso é incrível!

Use namespaces para os eventos. Isso facilita dar unbind sem afetar outros eventos. Acredite, isso salva vidas.

  $("#meuBotao").on("click.meuClickEspecial", funcaoLouca); // Fantástico

  //unbind sem afetar outros clicks
  $("#meuBotao").unbind("click.meuClickEspecial");

O jQuery tem uma parada chamada Event Delegation que permite atrelar um ouvinte do evento a um elemento.

  $("#list a").on("click", funcaoQueFazAlgo); // não curti

O código acima funciona de boa. Ele atrela o ouvinte do evento click a todos os links da lista #list. Isso é palha e pode causar alguns problemas. Imagine que você precise adicionar outro link na lista. Esse novo elemento não estará ouvindo o evento.  Vamos melhorar isso.

  $("#list").on("click", "a", funcaoQueFazAlgo); 
  //agora sim, o ouvinte é atrelado somente ao elemento pai #list

Não misture css com jQuery.

  $("#mydiv").css({'color':red, 'font-weight':'bold'}); // vish

Use cache para os seletores:

  var $myDiv = $("#myDiv");
  $myDiv.click();

Use encadeamento de chamadas.

  $("#myDiv").addClass("error").show();

Use vanilla javascript, sempre que possível.

Até a próxima.

Referências

Git merge e rebase?

git

Quando se está trabalhando em uma branch e outro membro do time faz um git push, você terá que fazer um git pull antes de enviar seus commits para o repositório bare. Quando isso acontece, o git gera um commit de merge. Muitos commits de merge não são informações úteis para outros desenvolvedores e podem complicar a leitura do histórico de commits.

É uma boa prática usar pull com rebase usando o comando:

git pull --rebase

Desta forma o histórico fica mais legível.

Para deixar esse processo automatizado, podemos usar a seguinte configuração:

git config --global --bool pull.rebase true

Quando estiver trabalhando em um feature branch e precisar fazer um merge para o trunk, que geralmente é o branch master, é uma boa prática usar o parâmetro –no-ff.

git merge --no-ff my-feature

Isso faz com que o git gere um commit de merge mesmo quando faz fast-forward, criando rastreabilidade, facilitando saber de onde vieram as alterações e quando o merge foi feito. Também facilita reverter funcionalidades adicionadas ao master.

A configuração abaixo deixa esse processo automatizado. Com ela, todas as vezes que você fizer merge, o git irá criar um commit de merge automaticamente.

git config --global merge.ff false

Ainda falando de features branches, quando se está trabalhando em um feature branch e precisa-se levar commits do master para ele, muitos devs usam rebase. No entanto o rebase reescreve o histórico e complica o fluxo além de ser muito mais custoso resolver conflitos quando se usa rebase. Então é melhor usar merge nesses casos.

Até a próxima minha gente.

Depoimento de Wagner Felidré sobre o Tá Safo Conf 2015

Participar do Tá Safo Conf 2015 foi uma experiência maravilhosa e revigorante, mesmo sendo a primeira vez que estava participando de um evento totalmente voltado para tecnologia. Foi essencial para expandir meus conhecimentos sobre a área e saber que meus ideais para me tornar web developer estava no caminho correto. Tal aprendizado só ocorreu, pois havia um ambiente excelente para que isso acontecesse com uma boa organização e palestras que superaram as expectativas.

Continuar lendo