jQuery – width de elemento hidden

Publicado em Publicado por gserrano

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)?

27 maneiras de ser um melhor programador

Publicado em Publicado por gserrano

Hoje o @chrisbenseler twittou sobre uma apresentação chamado  27 maneiras de ser um melhor programador PHP. São apenas tópicos específicos que servem para qualquer desenvolvedor – e algumas se aplicam para outras profissões.

Vale a pena ler até o final (em inglês) e rever alguns conceitos e atitudes que temos no dia a dia e que podemos mudar a fim de melhorar nossa carreira.

27 Ways To Be A Better Developer

View more presentations from Lorna Mitchell.
 

Ps: se você está pensnado em comentar reclamando que está em inglês e pedindo uma tradução eu tenho uma dica que vai te ajudar em qualquer carreira: estude inglês, recomendo o Live Mocha para isso. 🙂

Verifica se string é número no javascript

Publicado em Publicado por gserrano

Já escrevi sobre o typeof do javascript, que retorna o tipo de um objeto no javascript – mas quando estava desenvolvendo algumas coisas do Eu Compraria! Shop eu tinha a seguinte situação: um post por ajax executava uma tarefa, em caso de erro retornaria a mensagem do erro (que poderia variar, de acordo com o erro) em caso de sucesso retornava um ID referente a operação, que eu usaria a partir dali.

Poderia utilizar json para receber um parâmetro success e os outros parâmetros e fazer a verificação do success, mas neste caso optei por algo diferente: verificar se o retorno era numérico (o ID) e prosseguir com o a função, caso contrário seria a mensagem de erro que era exibida para o usuário.

No meu exemplo a data retornada pelo post sempre será uma string (mesmo quando é um ID), portanto o uso do typeof(data) é inútil. Neste caso eu preciso verificar quando uma string é numérica.

 

Verificando se uma string é numérica

A função abaixo testa com expressão regular a string passada como parâmetro e retorna true em caso positivo (string é um número) ou false.

function isNumeric(str)
{
  var er = /^[0-9]+$/;
  return (er.test(str));
}

Update com a sugestão do Aurélio, agora o return é o próprio resultado do teste da regex, sem necessidade do true/false como retorno. Obrigado Aurélio!

Mais uma vez uma expressão regular facilitando nossa vida! 🙂

Como criar um bom XML Sitemap

Publicado em Publicado por gserrano

A nova versão do And After teve algumas mudanças bastante significativas de front-end e back-end, e isso causou uma gigantesca penalização na indexação do Google – deixamos de utilizar o subdomínio www e viramos um domínio no-www classe B (que redireciona tudo que tenha www retirando o subdomínio).

Seria possível manter o subdomínio www funcionando para evitar isso, mas resolvemos assumir o risco pois acreditamos que atualmente não faz sentido seu uso e também evita a possibilidade do conteúdo ser considerado duplicado nos domínios andafter.org e andafter.org.

Se você quer aprender um pouco mais sobre Search Engine Optimization (SEO) recomendo algumas leituras:

Sitemap protocol

Padronização é a palavra que faz a web funcionar de forma organizada e bonita, existem recomendação para criação de sitemaps em XML que são usada por vários motores de busca, incluindo o Google (que sempre foi o buscador que mais trouxe resultados para o And After).

Você pode encontrar a documentação completa e mais informações no sitemaps.org

 

Exemplo de sitemap

Segue um exemplo de sitemap com as especificações do sitemap protocol 0.9:

 

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>http://www.example.com/</loc>
      <lastmod>2005-01-01</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.8</priority>
   </url>
</urlset>

 

Cada link para o seu site deve ser um tag seguindo a estrutura acima, e as tags filhas são:

  • loc (obrigatório) – a url completa da página, incluindo o protocolo (http:// por exemplo)
  • lastmod (opcional) – a data da última modificação da página, seguindo a formatação do
    W3C Datetime  (exemplod: YYYY-MM-DD)
  • changefreq (opcional) – frequência de atualização da página, pode ter os seguintes valores:

    • always
    • hourly
    • daily
    • weekly
    • monthly
    • yearly
    • never
  • priority  (opcional) – define a importância relativa entre as páginas do seu site, o valor vai de 0.0 a 1.0.

 

Dicas: um sitemap não deve ter mais do que 50.000 links, se for necessário você pode criar mais de um sitemap e criar um índice de sitemaps (leia mais em inglês).

Depois de feito você pode cadastrar seu sitemap no Google Webmaster Tools e isso vai evitar que alguma de suas páginas não seja encontrada pelo Google e com a seleção de prioridade interna (priority) você pode escolher quais urls devem ter preferência sobre as outras do seu domínio no posicionamento das buscas (lembrando que isto não influencia o posicionamento na busca quando comparado com outros domínios, apenas define uma url preferencial quando páginas do seu domínio estão "concorrendo" por uma posição).

Verificando o tipo de um elemento no javascript

Publicado em Publicado por gserrano

Estava com problema entre a comunicação de dois serviços diferentes feito pela parte de front-end através do javascript.

Uma requisição ajax para o serviço retornava um array de objetos que a interface deveria percorrer e montar um html como resposta. O problema é que algumas vezes este array continha além dos objetos esperados alguma função de callback ou retorno indefinido (undfined) no array.

Para fazer o tratamento deste erro eu precisaria saber qual é o tipo do objeto retornado e ignorar qualquer um que não fosse "object".

Javascript typeof

O comando typeof do javascript retorna qual é o tipo do objeto em questão, os retornos dessa função podem ser:

  • number
  • string
  • boolean
  • object
  • function
  • undefined

 

Exemplo de uso:

if(typeof(myObj) == "object"){
   alert("myObj é um objeto, pode prosseguir");
}else{
   alert("Não é um objeto, ignore");
}

 

Curiosidades

A função typeof sempre retorna uma string (com os valores da lista lé de cima), então typeof(typeof(x)) sempre irá retornar string, não importa se x é um array, string, int ou função.

Um array é considerado um object, mas com a função abaixo (case sensitive, criamos a função typeOf) retorna os tipos padrões mais o array.

function typeOf(obj) {
  if ( typeof(obj) == "object" )
    if (obj.length)
      return "array";
    else
      return "object";
    } else
  return typeof(obj);
}

 

Função bem simples e ótima para previnir e tratar erros, dúvidas e sugestões nos comentários!