Git – enviando uma branch local para o repositório

Publicado em Publicado por gserrano

Você está implementando uma feature nova no sistema e para não prejudicar nenhum deploy da branch master criou uma nova branch na sua máquina, vamos supor que o nome desta branch é nova-feature.

Acontece que chegou um ponto que seu colega também precisa acessar sua branch para fazer novas implementações, então você precisa enviar a nova-feature do seu repositório local para o repositório remoto, onde qualquer pessoa que trabalhe no projeto possa acessar. 

Dando push da branch para o repositório remoto

git push origin nova-feature

Agora sua branch estará disponível no repositório remoto, e para seu colega baixar ela é simples:

git checkout –track origin/nova-feature

Agora você e seus colegas podem trabalhar em uma branch separada para aquele nova feature sem prejudicar a menutenção do código master! 🙂

3 Dicas de performance de CSS

Publicado em Publicado por gserrano

O primeiro passo para se discutir a performance da renderização das páginas no navegador é entender como o navegador funciona.

Antes de continuar você deve entender os conceitos de browser reflow e browser repaint, pois nosso objetivo para ter uma página renderizada mais rapidamente é a redução dos reflows e repaints da página.

Como o navegador interpreta o CSS?

O navegador começa a leitura do CSS da direita para a esquerda, do nosso último elemento para o primeiro. Ele pega o seletor bem da direita, percorre todos os elementos do DOM que casem com este seletor e passar para o próximo seletor a esquerda, verificando os parents do seletor que ele verificou anteriormente (o bem da direita na sua linha de seletores).

Parece confuso mas na prática é simples. Para o código abaixo, por exemplo:

#content #menu ul li a

O navegador vai varrer todos os elementos "a" da sua página, depois ele vai verificar quais destes elementos estão dentro de um elemento li e assim por diante até encontrar o elemento #content.

Agora que você já sabe como o navegador trabalha vamos as dicas de CSS para páginas rápidas!

 

1. Escreva seletores curtos

Agora que você já sabe como o navegador percorre o seu seletor, já sabe quanto mais curto ele for menos será o caminho percorrido e consequentemente mais rápida a renderização da sua página.

Evite

#content nav#menu ul li a

 

Melhor performance CSS

.menu-item

 

Outro exemplo, em uma página com bastante conteúdo tabular:

Evite

table thead tr td

 

Melhor performance CSS

.header-table

 

2. Prefira classes e ids do que seletor por elemento

Quanto mais preciso seu seletor for menos elementos do DOM serão percorridos pelo browser, o seletor de tag tende a ser mais abrangente do que seletor de classe.

Evite 

h2.product-title

Melhor performance CSS

.product-title

 

Evite

nav#menu

Melhor performance

#menu

O navegador não precisa fazer 2 verificações para estilizar os elementos casados com a classe.

 

3. Evite seletor universal, por atributo e pseudo-selectors

Principalmente no IE evite os pseudo seletores como :hover, :nth-child e outros. O seletor universal percorre todos os elementos do DOM (por isso a baixa performance) e os pseudo seletores tem uma performance bem inferior do que qualquer seletor por classe ou id, então sempre que for possível evite seu uso.

Evite:

input[type="text"]

Não tão ruim:

input.texto

Melhor performance CSS:

.input-texto

 

Dica bônus: não enlouqueça

Não seja um paranóico, não deixe que as preocupações com performance de CSS prejudiquem (muito) a organização e leitura do seu código.

Se você trabalha em projetos com uma equipe grande em que todos estão acostumados a escrever seletores descritivos (e compridos) para facilitar o entendimento do código pode ser um pouco complicado fazer esta mudança, uma boa dica é estimular comentários no CSS – qualquer processo de minify arrancará os comentários e manterá o código enxuto.

 

Para saber mais sobre performance no front-end veja este post sobre performance de javascript e o recente post do Chris sobre manipulação do DOM de forma mais performática.

Se está na dúvida (ou não acredita no que escrevi), utiliza esta ferramenta para testar a performance de seletores CSS.

 

Referências:

Melhorando a performance do CSS

Escrevendo CSS eficiente

Google best pratices rendering

Mozilla – Writting effective CSS

Simplifying CSS selectors

PHP – upload de arquivos com POST

Publicado em Publicado por gserrano

Sempre que implemento algumas coisas no And After surgem mil idéias para posts aqui no O Desenvolvedor, desta vez vou abordar como lidar com upload de arquivos com PHP através do método POST.

 

Formulário para envio de arquivo

Para permitir o upload de arquivos com PHP o formulário deve ter o atributo enctype da seguinte forma:

form enctype="multipart/form-data" action="post.php" method="post"

E o campo de arquivo, onde o usuário vai selecionar o arquivo que será submetido através do método POST"

input name="userfile" type="file"

Upload de arquivo com PHP

Na sua página PHP que receberá o post do formulário você terá acesso ao objeto $_FILES, que será um array com todos os arquivos submetidos no post.

Para acessar um arquivo específico, usamos o valor do atributo "name" que foi utilizado no inpute de arquivo no formulário, no exemplo anterior o nome é "userfile", portanto teremos $_FILES['userfile'].

Para visualizar no navegador todas as informações existentes no objeto faça o seguinte:

print_r($_FILES['userfile']);

Você terá

  • $_FILES['userfile']['name']
  • $_FILES['userfile']['type']
  • $_FILES['userfile']['size']
  • $_FILES['userfile']['tmp_name']
  • $_FILES['userfile']['error'] (veja a lista de código de erros do upload PHP)

Com estas informações você pode aplicar toda a lógica e tratamento necessário como verificação da extensão, tamanho, nomenclatura do arquivo, etc.

Perceba que o arquivo é salvo temporariamente no servidor, portanto neste ponto do código não existe nenhuma mágica, o upload já foi feito e você só precisa mover e renomear o arquivo para onde você deseja.

Função move_uploaded_file

Depois de fazer os tratamentos necessários no PHP, você pode utilizar a função move_uploaded_file para mover o arquivo para o diretório onde ele deverá ficar (veja como criar pastas em PHP).

$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . $_FILES['userfile']['name'];
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploaddir . $_FILES['userfile']['name'])) {
    echo "Upload com sucesso";
} else {
    echo "Erro no upload";
}
print_r($_FILES);

Espero ter ajudado no entendimento de como funciona o upload de arquivos com PHP, atualmente deixo o Code Igniter gerenciar quase tudo isso nas minhas aplicações. 🙂

Executando comandos unix pelo PHP

Publicado em Publicado por gserrano

Eu apliquei um sistema unificado de cache no And After, nos blogs do site e na loja Eu Compraria, este sistema tornou o Gir (nosos querido escravo-servidor) muito mais eficiente na realização de suas tarefas.

O sistema de cache utiliza o Code Igniter com memcached e cache de arquivo físico. Isso otimizou muito o carregamento de todas as nossas páginas: "(1.002 Seconds), 70% of sites are slower: segundo a Alexa.

Além de adiantar a entrega das páginas, melhorando a vida dos leitores, reduziu drasticamente o consumo (e consequentemente o custo) de servidor e eliminou os problemas de performance com com o alto consumo de processamento do MySQL (saiba as diferenças entre innoDB e MyISAM).

Automatizando a "limpeza" de cache

A única dificuldade que isto acarretou foi o trabalho de realizar a limpeza de cache de arquivos físicos quando era necessário.

Até hoje eu fazia isso via ssh: logava no servidor e removia os arquivos necessários. Eu poderia implementar um sistema do Code Igniter para fazer isso, mas envolveria percorrer todos os registros do banco e eliminar o cache referente a cada objeto.

Um modo menos custoso e trabalhoso de fazer isso é automatizar a remoção dos arquivos físicos através do próprio PHP, e uma forma de fazer isso é com o comando shell_exec.

PHP shell_exec

O comando do PHP shell_exec permite você executar algum comando do terminal unix diretamente pelo PHP, retornando como uma string qualquer coisa que este comando imprima no terminal.

Atenção: este comando pode expor seu servidor a problemas de segurança.

No meu caso eu queria apagar os arquivos físicos de cache, um exemplo de sintaxe para o meu caso:

shell_exec('rm /var/www/andafter.org/htdocs/cache/publicacoes/*');

 

Vale lembrar que seu usuário www deve ter as permissões necessárias para executar os comandos. Abriu um novo leque de possibilidades do que é possível fazer com o PHP depois de conhecer este comando. 🙂