Palestra sobre responsive design

Este ano graças a indicação do Daniel Filho (uma das personalidades mais influentes no mercado de front-end nacional que odeia este título que o acompanha) tive a oportunidade de palestrar no Campus Party (e tinha esquecido de compartilhar isso no blog!).

Falei um pouco sobre responsive design sem mimimi, se vocês conseguirem me acompanhar correndo pelo palco perceberão que tentei abordar alguns temas que considero importante no assunto:

  • Vantagens e desvantagens do responsive design
  • Qual o impacto do responsive design para os usuários?
  • Qual o objetivo do responsive design?
  • Qual o custo do responsive design
  • Qual a melhor forma de pensar em design responsivo?

Vídeo da palestra sobre responsive design

Aqui tem o vídeo e mais abaixo os slides da apresentação.

[http://www.youtube.com/watch?v=piXlBkzrSeM]

Correções:

  • em 5:20 falei em aplicar folha de estilos para dispositivos e isso é tudo que o design responsivo não é, eu queria dizer resoluções   

Encontrou mais alguma canelada? Comenta aí para eu atualizar o post.

Slide sobre responsive design

[slideshare id=16342889&doc=responsivedesign-130204092612-phpapp01]

Gostou? Compartilhe!

O que é browser reflow?

Com o crescimento da banda larga e a evolução da web como um todo, a preocupação de performance deixou de ser exclusividades dos desenvolvedores back-end e se tornou uma grande preocupação de front-end.

Essas preocupações me levaram a melhorar muito meu código javascript (vejas estas dicas de performance em javascript) e aqui no iG comecei a estudar melhor a forma que os navegadores trabalham a fim de melhorar a performance desde a parte do HTML.

O que é browser reflow?

O "browser reflow" é uma tarefa do navegador que calcula o posicionamento e dimensão de todos os elementos da sua página. O navegador percorre toda a árvore DOM mesclando a estrutura do HTML com o CSS (externou ou inline) que fica na "style structure", isso forma a Render Tree, que é o que nós visualizamos.

A cada reflow, todos os elementos tem o tamanho e reposição calculadas, por isso que um excesso de reflow causa mais processamento e consequentemente páginas com uma renderização mais demorada.

Para entender melhor o que é um reflow, assista o vídeo de como o navegador renderiza o HTML, neste mesmo post.

O que é um repaint?

Repaint é quando acontece uma alteração visual no elemento (cor, background) que não altera suas dimensões (margem, padding, largura ou altura). O repaint é menos custoso em termos de processamento.

 

Minimzando o browser reflow

Agora que você já sabe o que é reflow e sabe o impacto na performance da exibição da página, a redução do desse processamento se torna mais importante para saber como fazer páginas rápidas.

O Google tem um vídeo bacana (em inglês) com algumas dicas para minimizar o reflow:

Dicas para manter suas páginas mais rápidas

  • Minimize o browser reflow
  • Reduza o HTML desnecessário do DOM e tente manter a árvore o mais "raza" possível. Quando uma alteração é feita em algum elemento ele causa efeitos em toda a árvode DOM, quando menos profunda ela for mais rápido será o reflow e qualquer outra manipulação no DOM.
  • Minimize o CSS e remova CSS que não é utilizado – o CSS é "interpretado" para formação da render tree, e o CSS "sobrando" sem dúvida vai tornar a render tree mais lenta, refletindo diretamente na experiência do usuário ao navegar nas suas páginas.
  • Para fazer animações e layouts mais complexos, sempre que possível faça isso fora do "reflow", para isso utilize posição absoluta ou fixed.
  • Evite seletores de CSS complexos, quanto mais profundo e complexo for um seletor mais custoso em performance será para mondar a render tree da página.

 

Como o browser renderiza sua página?

Para exemplificar melhor os assuntos que tratamos, abaixo tem um vídeo da Mozzilla, que mostra como o browser trabalha para renderizar uma página.

Não deixe de ver a apresentação sobre performance em javascript, outro fator muito importante quando falamos de performance no front-end.

Vamos fazer uma web mais rápida? 🙂

Referências:

Googl e code

Tableless

Validação simples de formulário com jQuery

Normalmente opto pelo uso do jQuery Validate para validação de formulário (veja como ignorar o jQuery Validate), mas em uma tela que estava trabalhando eu tinha vários formulários que abriam em modal (usando o PrettyPhoto) e eram manipulados antes da abertura dependendo das ações do usuário naquela tela.

Ao invés de usar o validate achei que seria mais simples implementar uma função para validação, seguindo a seguinte regra:

  • Os elementos com a classe "required" devem ser obrigatórios
  • Adicionar a classe "error" aos elementos obrigatórios não preenchidos
  • Exibir um elemento com a mensagem de erro do formulário
  • Retornar true se passar na validação

A função ficou bastante simples e poderia ser escrita facilmente sem o uso do jQuery.

Validação sem plugin

function validateForm(form){
    var err = 0;
    form.children('.required').each(function(){
        if($(this).val() == '' || $(this).val() == null){
            $(this).addClass('error');
            form.children('.error_form').show();
            err++;
        }
    })
    if(err == 0)
        return true
}

 

Update

Seguindo a dica do Chris, a validação do exemplo acima pode ser substituída por uma expressão regular que verifica se a string é vazia no javascript, como no exemplo abaixo:

function notNull (x){
        if(a!="" && !(a.match(/^\s+$/))){
            return true;
        }else{
            return false;
        }
}

A função segue a seguinte lógica:

  1. Recebe como parâmetro um objeto do jQuery (optei por isso ao invés do id ou classe pois meu código já tinha uma variável com o form selecionado por questões de performance.
  2. Cria uma variável chamada err com valor 0, que irá contabilizar os erros (caso exitam).
  3. Percorre todos os elementos do formulário e busca pelos que tenham a classe "required", percorrendo todos estes e:

    1. Verifica se o valor do elemento é vazio ou null, se for adiciona a classe "error" no elemento e mostra o elemento com classe "error_form" que está no formulário (caso exista).
    2. Soma 1 a variável err.
  4. Se depois de percorrer todos os elementos com classe "required" nenhum erro for contabilizado retorna true.

 

Seria possível retornar também o número de erros em caso de false, modificando o final da função para:

    if(err == 0)
        return true
    else
        return err;

Sei que validação já é um assunto um pouco "manjado" de javascript e muita gente opta pelos plugins, resolvi compartilhar para mostrar como funciona e exeplificar que nem sempre é necessário a gente inserir plugin para tudo o que vamos fazer…

Seletor por classe no javascript

Vi alguns questionamentos em fóruns sobre seletor de classe em javascript e resolvi compartilhar uma solução do fórum, que extende o document para que seja possível fazer seleção de elementos por classe sem a necessidade de usar uma biblioteca (jQuery, por exemplo) para isso.

Já postei um exemplo em HTML5 da selector API (querySelector), mas como isso só é suportado por browsers modernos a solução abaixo quebra o galho (e se getElementsByClassName for nativa do navegador ele usa a função nativa).

Função getElementByClassName

A função abaixo permite que você user document.getElementByClassName('nomeDaClasse') para fazer seletores sem o uso de nenhuma biblioteca.

if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className)
    {
        var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var allElements = document.getElementsByTagName("*");
        var results = [];

        var element;
        for (var i = 0; (element = allElements[i]) != null; i++) {
            var elementClass = element.className;
            if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                results.push(element);
        }

        return results;
    }
}

 

Na maioria dos projetos uso jQuery, mas tem alguns que o javascript é tão simples que não é necessário os 29Kb – e esse seletor de classes já quebra o galho. 🙂

Solução de um colaborador do DevShed.

jQuery – width de elemento hidden

O jQuery em sua versão 1.4.3 (já leram sobre a jQuery 1.5 que acabou de sair do forno?) tem um bug que impossibilita o uso do .width em elementos que não estão v isíveis na tela (com o uso do display: none), o retorno sempre é 0 para a largura desses elementos.

Segundo o  bug report foi corrigido na versão 1.4.4 (em um dos projetos que estou trabalhando a versão do jQuery era a 1.4.4 e o bug estava presente – como o projeto já estava em fase final achei melhor não alterar a versão da biblioteca e utilizar uma correção quando necessário).

Para quem está em situação parecida, segue um pequeno hack que manipula o CSS do elemento, pega o width e depois desfaz a alteração do CSS.

Usando o .width em elementos invisíveis

            $(this).css({ position: 'absolute', display: 'block' });
            var elemWidth = $(this).width();
            $(this).css({ position: '', display: 'none' });

O que o hack faz é deixar o elemento com display block e position absolute (assim o jQuery não se perde na hora de calcular a largura do elemento), feito isso você pode usar o .width e voltar os valores do position e display do elemento para como estavam antes.

Já passaram por este problema? Como resolveram (ou resolveriam)?