Ruby on Rails substituir o div field_with_errors por span

Por padrão o Ruby on Rails cria um div com o class field_with_errors em torno dos campos com problema de validação, particularmente eu não gosto muito desse div, prefiro ter um span em torno dos campos.

Para fazer o Ruby on Rails gerar um span ao invés de um div, você pode adicionar um initializer, para isso:

Crie o arquivo field_with_errors.rb e salve no diretório config/initializers/ com o seguinte conteúdo:

# Para quando o campo tiver erro colocar um span em torno do campo e do label, ao invés de um div que quebra a estrutura
ActionView::Base.field_error_proc = Proc.new { |html_tag, instance| %{<span class="field_with_errors">#{html_tag}</span>}.html_safe }
Posted in Ruby on Rails at maio 3rd, 2011. No Comments.

Google’s Pacman Doodle – Engenharia Reversa

Na página do Google de hoje (21 de maio de 2010) tem um doodle do Pacman – e o mais interessante disso: é jogável! E é o primeiro doodle jogável do Google.

Sendo um geek, eu decidi dar uma olhada no código-fonte para descobrir como o Google fez isso.

Eu não fiz engenharia reversa do código inteiro, eu só queria ter uma ideia geral de como eles tinham feito isso. Parece-me que o Google, afinal, tem um código extramamente conciso e eficiente para resolver muitos dos seus problemas.

Assim, em primeiro lugar eles têm um elemento div que contém a área do jogo:

<div id=lga>
  <a href="/search?q=PAC-MAN+30th+Anniversary&ct=pacman10-hp&oi=ddle" id="dlink">
  </a>
  <div id=logo style="width:554px;height:186px;background:black url(logos/pacman10-hp.png) 0 0 no-repeat;position:relative;margin-bottom:9px" title="PAC-MAN's 30th Birthday! Doodle with PAC-MAN™ & ©1980 NAMCO BANDAI Games Inc.">
    <div id="logo-l" style="width:200px;height:2px;left:177px;top:157px;background:#990;position:absolute;display:none;overflow:hidden">
      <div id="logo-b" style="position:absolute;left:0;background:#ff0;height:8px;width:0">
      </div>
    </div>
  </div>
  ...
</div>

E depois há o script mágico:

<script>
    google.pml = function() {
        function d(a) {
            if (!google.pml_installed) {
                google.pml_installed = true;
                if (!a) {
                    document.getElementById("logo").style.background = "black";
                    window.setTimeout(function() {
                        var b = document.getElementById("logo-l");
                        if (b) b.style.display = "block"
                    }, 400)
                }
                a = document.createElement("script");
                a.type = "text/javascript";
                a.src = "logos/js/pacman10-hp.2.js";
                google.dom.append(a)
            }
        }
        function e() {
            if (document.f && document.f.btnI) document.f.btnI.onclick = function() {
                typeof google.pacman != "undefined" ? google.pacman.insertCoin() : d(false);
                return false
            }
        }
        if (!google.pml_loaded) {
            google.pml_loaded = true;
            window.setTimeout(function() {
                document.f && document.f.q && document.f.q.value == "" && d(true)
            }, 1E4);
            e();
            google.rein && google.rein.push(e);
            google.dstr && google.dstr.push(function() {
                google.pacman && google.pacman.destroy();
                if (google.pml_installed) {
                    for (var a = (document.getElementById("xjsc") || document.body).getElementsByTagName("script"), b = 0, c; c = a[b++];) c.src.indexOf("/logos/js") != -1 && google.dom.remove(c);
                    google.pml_installed = false
                }
            });
            google.pacManQuery = function() {
                google.nav(document.getElementById("dlink").href)
            }
        }
    };
</script>

O que parece estar fazendo é o seguinte:

  • Define o estilo CSS e propriedades para vários elementos HTML jogáveis;
  • Carrega o código Javascript do Pacman: http://www.google.com/logos/js/pacman10-hp.2.js (nota: esse link era válido quando eu carreguei isso em 21 de maio de 2010, o dia do doodle, mas pode ser removido mais tarde. Depende do Google, e eu não quero guardar uma cópia offline por razões legais e outros.);
  • Quando o jogo é terminado, redireciona para o link do elemento a id=”dlink”, e basicamente procura pela frase “PAC-MAN 30th Anniversary”;
  • Responde ao botão “Insert Coin” quando é pressionado e reinicia o jogo.

No estilo Google: realmente puro e eficiente!

Eu usei dois recursos online para formatar o HTML e Javascript do Google melhor:

Esse post é uma tradução do post: http://sumanrs.wordpress.com/2010/05/21/googles-pacman-doodle-reverse-engineering-101/

Posted in Game, Javascript, Web 2.0 at maio 21st, 2010. No Comments.

 Assinar RSS Feed