Na área da computação, cache é um dispositivo de acesso rápido, interno a um sistema, que serve de intermediário entre um operador de um processo e o dispositivo de armazenamento ao qual esse operador acede. A vantagem principal na utilização de uma cache consiste em evitar o acesso ao dispositivo de armazenamento – que pode ser demorado -, armazenando os dados em meios de acesso mais rápidos

Um dos níveis possíveis de cacheamento é através de variáveis locais e é recomendado para funções chamadas mais de N vezes na mesma execução e pode resultar em um ganho de performance absurdo tanto no código quanto no banco de dados atrás da operação.

Digamos que temos a seguinte função abaixo representada em PHP:

1
2
3
4
5
6
7

function loadAllData() {
    /* Realiza query no banco */
    /* Processa informação */
    /* Calcula valores */
    /* Processa valor em outra função */
    return $data; /* retorna o valor */
} // end :: function :: loadAllData

Implementando o cache com o uso de variáveis estáticas

As variáveis estáticas (do tipo static) mantém seu valor único dentre as instâncias da função ao longo da aplicação e estão implementadas em praticamente todas as linguagens de programação.

Veja abaixo a mesma função PHP com o cache em variáveis estáticas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function loadAllData($reset = false) {
 
    static $cache;
 
    if (!isset($cache)) || $reset):
    /* Realiza query no banco */
    /* Processa informação */
    /* Calcula valores */
    /* Processa valor em outra função */
        $cache = $data; /* Atualiza o cache */
    else:
        $data = $cache; /* Lê direto do cache */
    endif;
    return $data; /* retorna o valor */
} // end :: function :: loadAllData

O código acima verifica se a nossa variável $cache está definida e lê o valor diretamente dela caso verdadeiro. Caso contrário, roda a lógica e depois associa o valor computado à variável $cache.

NOTA: O parâmetro $reset foi adicionado para forçar que o valor seja atualizado.

Implementando o cache com variáveis estáticas em funções com parâmetros

Para isto, basta usarmos a variável que vai receber o cache como array associativo e então puxar a chave correspondente. Esta chave pode ser qualquer string baseada nos parâmetros informados para haver diferenciação / relação entre a chave e o que vai ser obtido nela. É imperativo que a relação com os parâmetros seja facilmente parseada.

Implementação em PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function loadAllData($data_id, $time_start, $reset = false) {
 
    static $cache = array();
 
    $cacheKey = "{$data_id}_{$time_start}"; /* Chave que será utilizada para diferenciar as entradas no cache */
 
    if (!isset($cache[$cacheKey])) || $reset):
    /* Realiza query no banco */
    /* Processa informação */
    /* Calcula valores */
    /* Processa valor em outra função */
        $cache[$cacheKey] = $data; /* Atualiza o cache */
    else:
        $data = $cache[$cacheKey]; /* Lê direto do cache */
    endif;
    return $data; /* retorna o valor */
} // end :: function :: loadAllData

Implementando outros níveis de cache

Pode-se aninhar este cache com variáveis estáticas a outros caches como memcached.

Implementação de cache aninhado em PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$m = new Memcached();
$m->addServer('localhost', 11211);
 
function loadAllData($data_id, $time_start, $reset = false) {
 
    static $cache = array();
 
    $cacheKey = "{$data_id}_{$time_start}"; /* Chave que será utilizada para diferenciar as entradas no cache */
 
    if (!isset($cache[$cacheKey])) || $reset):
        if (!$data = $m->get('loadAllData_'.$cacheKey)):
    /* Realiza query no banco */
    /* Processa informação */
    /* Calcula valores */
    /* Processa valor em outra função */
        endif;
        $cache[$cacheKey] = $data; /* Atualiza o cache */
    else:
        $data = $cache[$cacheKey]; /* Lê direto do cache */
    endif;
    return $data; /* retorna o valor */
} // end :: function :: loadAllData

E você, otimiza como?

Os exemplos abaixo são uma tentativa de levar o usuário para seu painel de controle.
Suponhamos que tenhamos a rota para o controlador clients e método myaccount.

1

Route::connect('/clientes/minhaconta',array('controller'=>'clients','action'=>'myaccount'));

Modelo Hardcoded

1
2
3

$var = "/clientes/minhaconta";
# (saída) 
# $var = "/clientes/minhaconta";

Modelo com o auxílio da classe Route

Nesta classe, contamos com o método estático url que tranforma a instrução de array (a mesma usada no connect) para seu endereço relativo respectivo.

1
2
3

$var = Route::url(array('controller'=>'clients','action'=>'myaccount'));
# (saída) 
# $var = "/clientes/minhaconta";

O truque da ação index com named parameters

É comum usarmos as rotas genéricas do CakePHP que ao chamar /controlador/método chama a respectiva função no controlador. O problema existe quando a rota não está definida explicitamente, chamamos o controlador sem função /controlador (que vai buscar a função index quando não definido explicitamente) e passamos os famosos named parameters [1]: Como a ação padrão index é omitida (pois é deduzida pelo CoC do CakePHP), as named parameters são acrescidas ao final da url e acabam sendo confundidas com a ação que deveria ser chamada.

1
2
3
4

$urlData = array('controller' => 'controlador', 'action' => 'index', 'namedarg' => 'valor');
debug(Router::url($urlData));
# (saida)
# /controlador/namedarg:valor

Para contornar este problema basta definirmos a rota explícitamente:

1

Route::connect('/controlador/:action',array('controller'=>'controlador','action'=>'index'));

Tendo assim a saída conforme esperado: /controlador/index/namedarg:valor

Pronto, agora se mudares o nome da acão o código se adaptará. Diga não ao hardcode!

NOTA: A função url também recebe um segundo parâmetro do tipo boolean que indica se a URL retornada é absoluta ou não (relativa). O valor padrão é false.

NOTA: A dica só vale para o framework CakePHP.

Referências

• [1] http://book.cakephp.org/pt/view/541/Par%C3%A2metros-nomeados

Problemas todos temos, há inúmeras ações preventivas como Unit Testing (inglês) e afins, porém dado o dano, é imperativo que toda operação seguinte transcorra com a maior cautela e menor aparência possível para minimizar quaisquer impactos com o relacionamento com o cliente.

Visão geral da falha

Uma falha é quando o conteúdo (input) passado para uma operação (função) não possui forma de ser tratado dentro da mesma, causando um erro, uma excessão à regra. Em caso de falha é como um incêndio: Precisamos primeiro acalmar as pessoas e evacuar o local para reduzir as casualidades.

Evitando que o usuário tenha contato com a mensagem de erro

Além de ser anti-estético também é uma falha de segurança. As mensagens de erro contém informações valiosas para o desenvolvedor localizar a falha entretanto também são valiosas para um usuário experiente mal-intencionado.

Reportando o erro aos desenvolvedores

Use um “error handler” (gerenciador de erros) de acordo com sua linguagem de programação que se encarregue de interceptar os erros e repassar aos desenvolvedores. Algumas das opções são:

File Logging (monitoramento passivo)

Consiste em gravar os erros em um arquivo de texto para análise forense. É imperativo que estes registros sejam monitorados constantemente.

SQL Logging (monitoramento passivo)

Consiste em gravar os erros em um banco de dados (MySQL, PostgreSQL, Sqlite etc) para análise forense. É imperativo que estes registros sejam monitorados constantemente.

E-mail Logging (monitoramento ativo)

O gerenciador envia o erro para contas de email previamente configuradas.

SMS Logging (monitoramento ativo)

Algumas operadoras de celular fornecem serviços de SMS via webservice ou alguma intervenção HTTP. Este tipo de gerenciamento consiste em enviar a mensagem de erro por mensagem de texto SMS para números de celulares. NOTA: Algumas operadoras fornecem serviço de SMS através de uma conta de e-mail, podendo assim usar o modelo de E-Mail Logging)

I.M. Logging (monitoramento ativo)

Temos inúmeras classes que implementam o protocolo MSNP9 e MSNP12 do Windows Live Messenger além do XMPP (Jabber/Google Talk). Neste modelo, as mensagens de erro são enviadas diretamente para contas de mensageiros instantâneos.

Screen Logging (monitoramento ativo)

Este é o que reporta as mensagens de erro na tela durante a execução da página. Deve ser habilitado somente para ambiente de desenolvimento.

O que enviar como mensagem de erro

Tudo que for possível sobre o estado do ambiente onde o erro foi gerado é importante. Em termos de web: As informações do servidor, os headers de request do browser, a sessão do usuário, o que foi enviado tanto por GET quanto por POST, os cookies e a cor da meia do usuário. Em PHP seriam as variaveis $_SERVER, $_REQUEST, $_SESSION, $_GET, $_POST e $_COOKIE respectivamente. (Ainda não fomos capazes de detectar o último item)

O polimorfismo comportamental

O sistema deve ser “duas caras”: se comportar de uma maneira quando no ambiente de desenolvimento quanto no de produção sem que seja necessária pilhas de configuração. Uma boa prática é deixar os módulos de logging encapsulados entre ifs de checagem de ambiente. Esta checagem pode ser tanto automática (por distinção do host) ou manual (por setagem de uma variável ou constante que defina o ambiente em vigor). Assim, o sistema saberá se enviará o erro na tela ou para os desenvolvedores ou ambos de forma natural.

Error reporting além da aplicação

Além de erros gerados durante o funcionamento da aplicação precisamos também monitorar erros 404 [página não encontrada] (decorrentes de linkagens errôneas) e 500 [erro interno do servidor] (que pode ser decorrente de N casualidades). O core do servidor web Apache fornece as diretivas ErrorDocument onde pode-se colocar scripts que façam o encaminhamento das informações de debug (página que estava tentando ser acessada que não foi encontrada etc) para os desenvolvedores da forma apropriada.

Combatendo a falha

Em caso de falha, mesmo que os erros estejam sendo omitidos do usuário, as coisas não funcionarão como esperado podendo gerar dados errôneos causando ainda mais prejuízo. Se você não tem um ambiente de testes / desenvolvimento (cenário muito comum) certamente precisará ecoar texto na tela para fins de debug (dumps de variáveis, sinalização de checkpoints etc). Precisamos de alguns passos para realizar o combate:

Colocando o serviço em modo de manutenção

Precisamos redirecionar todo o tráfego (exceto o proveniente da equipe de manutenção) para um local com uma mensagem indicando que o serviço está ativo mas encontra-se suspenso para manutenção e será retomado em instantes para minimizar a bounce rate (taxa de rejeição) que é alta no caso dos usuários se depararem diretamente com mensagens de erro. Tal rejeição pode ser crucial em varejistas na perda da venda para o concorrente.

NOTA: Um exemplo é o Submarino que frequentemente presenteia seus usuários com mensagens de erro do Asp.NET.

Para realizamos esta operação quando sob um servidor web Apache precisamos estar com permissão de AllowOverride Options para o diretório raiz da aplicação no seu arquivo de configuração do servidor além de estarmos com o módulo de Url Rewriting mod_rewrite instalado no mesmo (muito comum na maioria dos hostings).

Basta a simples colocação de um arquivo (de preferência html estático) e um .htaccess com o código abaixo na raiz do servidor.

1
2
3
4
5

Options +FollowSymlinks
RewriteEngine on
RewriteCond %{REQUEST_URI} !/em-manutencao.html$
RewriteCond %{REMOTE_HOST} !^200\.200\.200\.200 # IP da equipe de manutenção
RewriteRule $ /em-manutencao.html [R=302,L] # arquivo com a mensagem de manutenção

Podemos ligar e desligar o modo de manutenção apenas modificando a diretiva RewriteEngine on para RewriteEngine off.

Note que além do envio do header 302 (Movido temporariamente) você deve manter meta tags de noindex para não afetar sua indexação no google.

Como debugar?

Bom, aí vai de desenvolvedor para desenvolvedor. A minha técnica consiste em diversas operações.

Análise da mensagem

Começo pela análise forense das informações de erro que me foram passadas que costumam mostrar o problema em 80% dos casos. Ler atentamente a mensagem de erro pode dizer tudo o que você precisa saber.

Olhando para o paciente

Com a experiência conseguimos ver alguns erros só de olhar, assim como um médico experiente. Identifico depois o bloco onde o erro foi localizado e o observo por erros de lógica e falhas aparentes.

Checkpoints

Em algumas vezes (principalmente quando mexendo em códigos de terceiros) preciso colocar checkpoints: prints de mensagens com identificadores para saber quando o programa passa por ele para identificar por quais pontos do código aquela regra está passando.

Dumps

Obter dumps (saídas na tela ou texto) de uma função ou variável ajuda muito em ver como está sendo gerada a saída que pode estar conflitando. Em PHP uso muito o var_dump por me mostrar até o tipo do dado em questão visto que no PHP temos o famoso type juggling (conversão de tipo on-the-fly) e pode gerar conflitos.

E aí, qual a sua boa prática de monitoração e debug?

Eu como fanático da otimização sempre andei de mãos dadas com minificadores de código (préprocessadores de compressão e remoção de dados desnecessários) e quando encontrei o WP-Minify achei que meus problemas de wordpress com os plugins que possuem arquivos externos . Falácia! O WP-Minify conseguia lidar belamente com os arquivos que acresciam suas linhas através dos hooks wp_register_script e wp_enqueue_script porém os scripts que não tinham este cuidado (e que não são poucos) e geravam código inline ou adicionavam ao head através de prints acabavam ficando.

Thaya Kareeson, autor do plugin, lançou recentemente uma nova versão que poe o output do tema em buffer e então o processa, pegando assim toda e qualquer aparição inline. O resultado da coleta é colocado em um arquivo temporário e chamado junto com o resto dos javascripts. Excelente!

O problema veio que meu badge do Rec6 (este no fim do artigo) depende do the_permalink() que não está disponível para o arquivo temporário cagandquebrando o código do badge.

Comecei a me deseperar, parei, respirei, abri a página de configuração esperando alguma opção para desligar o préprocessamento inline mas não havia. Comecei a me desesperar mais um pouco. Respirei e vi que tinha uma ‘blacklist’ de scripts e estilos para não serem minificados. Resolvi arriscar jogar a url do src do javascript (que era um .php). Maravilha, worked like a charm!

Espero que esta dica ajude algúem que, como eu, está(va) “batendo cabeça” com esse problema.

O responsável por isso é uma tag muito conhecida mas pouco compreendida: a tag link. Esta tag é conhecida por ser a responsável pela inclusão de arquivos CSS em documentos html mas pouca gente sabe por quê.

A tag link é responsável por definir qualquer relacionamento direto ou relacionamento reverso. Esta tag é uma short-tag e portanto não possui tag de fechamento, seguindo o terminador XHTML de short-tag <tag />

Análise

A tag de link possui a seguinte estrutura básica:

1

<link [direção]=[tipo] href='[documento relacionado]' />

Tipos e direções de relacionamento

Direção do relacionamento

Um relacionamento pode ter apenas duas direções: direta ou reversa.

Relacionamento direto

é o relacionamento do documento referenciado com o documento atual. Representado pelo atributo rel

Relacionamento reverso

é o relacionamento do documento atual com o documento referenciado. Representado pelo atributo rev

Tipos de relacionamento

Os relacionamentos entre documentos devem ter seu tipo especificado para que se possa saber como o documento se relaciona com o atual. Múltiplos tipos podem ser definidos através da mesma expressão sendo separados por espaços dentro do atributo rel ou rev. Ex: no caso da página anterior ser o índice.

Genéricos

alternate

Uma versão alternativa do documento (uma versão para impressão, versão em outra língua etc).

appendix

Um apêndice (como em livros) do documento.

bookmark

Documentos relacionados ao atual, como bibliografias ou artigos relacionados em geral

canonical

Um outro endereço para o documento atual.

copyright

A página de termos de uso e copyright do documento atual.

glossary

Um glossário (explicação) de termos empregados no documento.

help

Ajuda para o documento em questão. Muito útil para indicar páginas de FAQ.

stylesheet

Um arquivo de folha de estilo (CSS) alocado externamente.

Seção

Definem relacionamento entre documentos que pertencem ao mesmo grupo contínuo de documentos. Muito comum para arquivos seccionados como manuais ou artigos de múltiplas páginas.

start

O primeiro documento da série.

next

O próximo documento da série.

prev

O documento anterior da série.

contents

O documento é demonstra as páginas da série aninhadas por conteúdo. Uma espécie de índice geral.

index

O índice da série.

Referenciadores de índice

Usados para indicar relações específicas através do documento índice.

chapter

Um capítulo do documento.

section

Uma seção do documento.

subsection

Uma sub-seção do documento.

NOTA: Pode-se utilizar referências para seções no mesmo documento através de âncoras a.

Definindo o tipo de mídia

O tipo de mídia é o tipo de dispositivo de saída (monitor de PC, televisão, display de celular, display de handheld etc) onde a regra especificada no link

Definimos através do atributo media, dentro da tag link. O padrão (em caso de omissão da tag) é screen.

Tipos de mídia

screen

Monitores de computador

tty

Terminais Shell (navegadores texto como links ou lynx)

tv

Televisores

projection

Projetores multimídia / datashows (costuma ser setado pelo browser quando no modo “tela cheia”)

handheld

Palm-tops e handhelds em geral

print

Versão para impressão

braille

Impressoras e dispositivos braille.

aural

Leitores de texto para deficientes visuais.

all

Todos os dispositivos de mídia.

Definindo língua e a codificação de caracteres

As tags hreflang e charset definem, respectivamente, a língua e o conjunto de caracteres empregados no documento referenciado no relacionamento. Para isso a W3C disponibiliza a tabela de códigos de lingua (em inglês) e a tabela de códigos de conjunto de caracteres (charsets) (em inglês).

Mime-type

O mime-type do documento referenciado é identificado pelo atributo type comum em elementos XHTML. Uma lista de mime-types (em inglês) pode ser encontrado no site da IANA.

O caso do tipo de relacionamento icon

Os já conhecido favourite icon ou favicons foram introduzidos pela Microsoft como recurso do Internet Explorer 5 e eram reconhecidos pelo browser quando encontrava-se um arquivo Microsoft Icon Format (*.ico) na raiz do site com o seguinte nome: /favicon.ico

Como era de se esperar, a notação da tag link empregada pelo Internet Explorer era a definição de tipo de atributo rel como shortcut icon e violava o padrão W3C do atributo rel que deveria ter seus tipos de relacionamento separados por espaços (conforme dito previamente), transformando assim esta instrução nos tipos shortcut (que é inválido) e icon.

A Mozilla Labs implementou então que a tag deveria ficar apenas icon e foi seguida por navegadores como o Opera e está em vias de ser reconhecida como padrão.

NOTA: Algumas versões do Internet Explorer suportam apenas quando chamado por shortcut icon

Exemplos

Caso comum: Definindo CSS

Conforme citado no início deste artigo, o exemplo da definição de arquivos CSS externos é o caso mais comum e emprega os atributos type e media (opcional)

1
2
3

    <link rel="stylesheet" type="text/css" href="/css/site.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
    <link rel="stylesheet" type="text/css" href="/handheld.css" media="handheld" />

Páginas do grupo

1
2
3
4

 <link rel="contents" href="index.php" />
 <link rel="index" href="/secao/index.php" />
 <link rel="prev" href="/secao/artigo3.php" />
 <link rel="next" href="/secao/artigo5.php" />

Múltiplos tipos de relacionamento

O caso da primeira página da série

1

 <link rel="index prev" href="index.php" />

Documentos em outra língua

1

 <link rel="alternate" hreflang="en" href="/secao/en/artigo3.php" />

Feeds RSS

O Wordpress utiliza as tags link para especificar seus dois tipos de feeds RSS

1
2

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="/feed/" />
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="/feed/atom/" />

UPDATE: 23/05/2009
O Bruno Lustosa do Ataraxia! costuma acrescer uma querystring (texto após o ?) a URL para trackear a origem de algumas campanhas de email marketing e feeds e utilizou a tag link com o atributo canonical para evitar ter seu conteúdo dado como duplicado pelos buscadores que achariam que as páginas acrescidas da querystring seriam páginas distintas porém com o mesmo conteúdo.

NOTA: A tag link não deve ser usada para criar links de texto (apontadores de documento). São tags para definição de estrutura de documento e não são visíveis para o usuário final. Para isso utilize as tags a.

NOTA: Não há nenhuma declaração nem teste por minha parte de que o Google ou qualquer outro crawler considere esta tag em sua relevância entretanto programar corretamente nunca é demais.

Referências

• Documentação oficial da W3Schools (em inglês) sobre a tag link
• História do Favicon (em inglês) @ Wikipedia

O evento click no link não pode mais ser chamado pelo atributo onclick das tags a porque todos os atributos on* morreram também (Eu sei, é um massacre!) o que confirma o uso do JavaScript para atribuir o evento (observe/attach).

Usarei os seletores JQuery para pegar o que precisamos com uma pitadinha de REGEX.

Todos os links externos
[sourcecode language="javascript"]
$(document).ready(function() {
$(”a[href^='http://']“).click(function(ev){
ev.preventDefault();
window.open(this.href);
});
});
[/sourcecode]

Todos os links dentro da div com o atributo id ‘#div_id’
[sourcecode language="javascript"]
$(document).ready(function() {
$(’div#id_div a’).bind(’click’,function(ev) {
ev.preventDefault();
window.open(this.href);
}
);
});
[/sourcecode]

NOTA: Sempre encapsulo observadores de evento (também conhecidos como event listeners, event attachment ou event binding) na instrução $(document).ready() para garantir que o elemento a ser observado já esteja presente na memória quando o observador for anexado a ele.

NOTA: O uso do ev.preventDefault() ao invés de return false para seguir o padrão do JQuery. Apenas uma boa prática.

NOTA: ev é apenas um nome da váriavel. Você pode escolher o nome que melhor convir.

NOTA: Quando digo “corretamente” digo “seguindo os standards”. Não quero ofender a ideologia nem religião de nenhum desenvolvedor.

Alguem com uma ideia “correta” diferente?

Para as pessoas que não usam editores de textos compatíveis com este formato (como versões anteriores do Office), a Microsoft disponibilizou o “Microsoft Office Compatibility Pack for Word, Excel, and PowerPoint 2007 File Formats” para sistemas operacionais Windows.

Para quem usa Mac há o widget para desktop em http://docx-converter.com/ que também provê o serviço de conversão gratuito pela web que é independente de platafoma.

Para Linux, o OpenOffice 3 já lida com estes arquivos porém a conversão não é muito boa. Para quem quiser experimentar uma conversão melhor deve utilizar a dupla de odf-converter com odf-converter-integrator. No site do desenvolvedor (em inglês) há screenshots do documento original criado no Office, da conversão do OpenOffice 3 e da conversão feita pelo odf-converter/odf-converter-integrator.

Para saber mais sobre o OOXML visite a entrada do mesmo na Wikipedia (em inglês): http://en.wikipedia.org/wiki/Office_Open_XML