Python: Google and April Fool's Day

Como bem sabemos o dia da mentira é comemorado por todos e por muitas empresas, até mesmo o Google entrou nessa, e este ano não foi diferente, porém o que venho postar não é sobre o dia da mentira ou sobre as brincadeiras que o Google tem feito, apesar de serem muito divertidas.

O que me chamou a atenção foi o tal do Elegantizr que foi divulgado como um framework que promete deixar o site até 3 vezes mais rápido, e pior, muita gente mesmo caiu nessa!

Risadas a parte, a brincadeira foi tão legal que logo eu quis saber como foi feita. É bem provável que muitos venham a dizer que é algo super simples e etc, porém vale ainda assim blogar.

A brincadeira.

 Trata-se de um arquivo de CSS (http://www.google.com/landing/elegantizr/elegantizr.css) que deve ser incorporado no site:

<link rel="stylesheet" href="http://www.google.com/landing/elegantizr/elegantizr.css" />

Analisando o conteúdo do arquivo teremos o seguinte código:

:before { content: '\41\50\52\49\4C\20\46\4F\4F\4C\20\F4\BF\F4'; }

Não entendo muito das mágicas do CSS, e tive que recorrer a pessoas mais confiáveis no assunto como o

@agnogueira

,

@Tamosauskas

 e o

@google

, no qual me informaram que  trata-se de pseudo-elementos e que neste caso temos vários, dentre eles temos o before e after que são usados para gerar conteúdos antes e depois do conteúdo de um elemento.

A seguir uma exemplo de como

:before

e

:after

podem ser usados para inserir a URL logo após o texto de um link ou antes de um texto de um link:

 

Antes do texto de um link.

a:link:before {   content: " (" attr(href) ") "; }

Depois do texto de um link.

a:link:after {    content: " (" attr(href) ") "; }

Agora não quero me focar em CSS, então espero que os amigos 

@agnogueira

@Tamosauskas

 possam blogar algo sobre os pseudo-elementos de CSS :D

Como fazer.

Agora entramos na parte que gosto, notem que destaquei o trecho do código que é:

'\41\50\52\49\4C\20\46\4F\4F\4C\20\F4\BF\F4'

Aqui é onde a brincadeira acontece, este código ai acima trata-se de um texto (string) convertido em hexadecimal, vamos para um exemplo rápido:

>>> text = 'APRIL FOOL ô¿ô' >>> text.encode('hex').upper() '415052494C20464F4F4C20C3B4C2BFC3B4'

Note que no meu exemplo o código aparece diferente, isso por que o meu Python está usando encode utf8 como padrão, vejamos agora usando iso-8859-1.

>>> text = 'APRIL FOOL ô¿ô' >>> text.encode('iso-8859-1').encode('hex').upper() '415052494C20464F4F4C20F4BFF4'

Agora o que nos falta é adicionar a cada dois objetos uma barra invertida

'\'

, e teremos:

'\41\50\52\49\4C\20\46\4F\4F\4C\20\F4\BF\F4'

A idéia não é mostrar exatamente como foi feito claro, ou seja, fica por conta colocar as barras a cada duas strings como feito acima, porém isso pode ser feito também com Python.

Para finalizar fiz este abaixo que irá imprimir a frase Python antes de cada item, note que o procedimento é o mesmo.

 

A conversão.

>>> text = 'Python' >>> text.encode('iso-8859-1').encode('hex').upper() '507974686F6E'


O Css.

:before { content: '\50\79\74\68\6F\6E'; }


Até a próxima.