Jam-Pow! » Web

Debugger mobile

Jam-Pow! — Thu, 19 Jan 2012 23:12:02 +0000

Para inserir o Firebug Lite em qualquer site que você queira no Android, iPhone, iPad, no computador do trabalho (onde você não tem permissão pra instalar nada), etc. Basta adicionar este código abaixo como favorito e clicar depois de ter aberto o site que deseja debugar.

javascript:(function(F,i,r,e,b,u,g,L,I,T,E)%7Bif(F.getElementById(b))return;E=F%5Bi+'NS'%5D&&F.documentElement.namespaceURI;E=E?F%5Bi+'NS'%5D(E,'script'):F%5Bi%5D('script');E%5Br%5D('id',b);E%5Br%5D('src',I+g+T);E%5Br%5D(b,u);(F%5Be%5D('head')%5B0%5D%7C%7CF%5Be%5D('body')%5B0%5D).appendChild(E);E=new%20Image;E%5Br%5D('src',I+L);%7D)(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','%23startOpened');

Como assim!?

Pra quem não sabe, há uma forma de se inserir js em qualquer site pela barra de endereço. Faça o teste, neste meu blog mesmo!

Apague tudo o que estiver na barra de endereço
Escreva: javascript:alert(‘Luiza está no Canadá’);

Sacou?! Se você adicionar este código no lugar de uma url de um favorito ele executará o código na página que estiver aberta.

PS.: Não é tão fácil de usar num aparelho touch e/ou mobile, mesmo porque a interface é pra quem tem um mouse e mesmo se seu aparelho tiver uma daquelas canetas a tela dele provavelmente é bem pequena, mas quebra um galho dependendo do que quiser fazer com o debugger!

Estudando a API do Google Mapas

Jam-Pow! — Wed, 07 Sep 2011 21:44:38 +0000

Já tinha dado uma lida aqui, outra ali, mas hoje resolvi pôr a mão na massa definitivamente e fazer algo que alguns clientes vêm pedindo há algum tempo. Uma ferramenta simples onde pudesse colocar alguns endereços ordená-los como eu quiser e pedir ao google que trace as rotas entre os pontos.

1. Iniciando

Vamos começar com a estrutura básica e a inicialização do mapa.






Google Maps - Rotas

2. Adicionando alguns controles

Certo. Vamos modificar um pouco e colocar um painel de controle a direita, para que possamos adicionar uma lista com endereços, para facilitar um pouco, vamos carregar o jQuery (1.6.2) e jQueryUI (1.8.16). Nosso HTML entre as tags ficam assim.



  
    
    

    Dê um duplo clique para remover um endereço da rota

    
      R. Cipriano Barata, 200 - São Paulo
      Av. Lacerda Franco, 400 - São Paulo

E ao nosso JavaScript adicionamos:

    $(function(){

      //Adiciona endereço à lista
      $('#adic').click(function(){
        var ender = $('#addr').val();
        if (ender != '') {
          $('#addr').val('');
          var newid = new Date().getTime();
          $('#route').append('' + ender + '');
        }
      });

      //Habilita função de ordenação da lista
      $('#route').sortable({axis:'y'});

      //exclui no duplo clique
      $('#route').delegate('li', 'dblclick', function(){
        $(this).remove();
      });

    });

Legal, temos uma lista dinâmicas de endereços e um botão pra atualizar o mapa, que não faz nada ainda. Então…

3. Atualizando o mapa com as rotas

Começamos instanciando o objeto DirectionsService da API, para isso vamos adicionar a seguinte linha nas declarações iniciais do nosso bloco de JS.

var directionsService = new google.maps.DirectionsService();

E por fim no clique do botão “Traçar Rota”


      function getText(id) {
        return $('#'+id).text();
      }

      $('#trace').click(function () {
        var addresses = $('#route').sortable("toArray");
        var len       = addresses.length

        if (len < 2) {
          alert('Se liga... Não existe rota sem pelo menos dois endereços!');
          return false;
        }

        var start = getText(addresses[0]);
        var end   = getText(addresses[len - 1]);
        var waypts = [];
        for (var i = 1; i < len-1; i++) {
            waypts.push({
                location:getText(addresses[i]),
                stopover:true});
        }

        var request = {
            origin: start,
            destination: end,
            waypoints: waypts,
            optimizeWaypoints: false,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
      });

O resultado final, você pode ver aqui.

Acompanhe a evolução do código ou proponha melhorias no meu repositório do Git Hub

O que é closure?!

Jam-Pow! — Sat, 13 Aug 2011 21:04:36 +0000

Bem, eu também não sabia, mas agora eu sei! Sim, mas também não falarei o que é! Acesse este site, faça os simples exercícios propostos e descubra você mesmo, é fácil e rápido!

Se você não é tão bom de inglês, fique tranquilo! Eu ~~estou traduzindo/adaptando~~ traduzi/adaptei as lições para o português pra que todos possam entender!

~~Atualizarei este post em breve com o link traduzido assim que concluir o trabalho.~~

Pra vê-la em português, clique na bandeira do Brasil no rodapé da página.

Até mais!

Gerando documentação ruby on rails

Jam-Pow! — Sun, 13 Mar 2011 21:43:06 +0000

Não sei você mas eu já precisei trabalhar em locais sem internet, até mesmo em casa quando meu provedor de internet resolve me deixar na mão. Mas enfim, você precisa produzir e não lembra como escreve aquele método que você tanto precisa e não consegue acessar a internet para consultar a documentação… o que fazer?!

Enquanto estiver com internet prepare seu computador pra quando ela se for!

ruby:

cd ~/.rvm/source/ruby-1.8.7-p302
rdoc -o ~/rubydoc --format=html

gems:

gem install yard
yard server --gems

Gráficos na Web

Jam-Pow! — Sat, 16 Oct 2010 17:09:23 +0000

Depois do curso de imersão rails da e-genial sinto-me mais confiante pra usar o rails e todo o poder de ruby, por isso decidi buscar mais gems pra resolver meus problemas e tirar algumas das bibliotecas JS que tenho usado, por exemplo, pra fazer gráficos, como o FLOT pra jQuery. Já tinha visto meio por cima o Google Charts, mas como já tinha iniciado a implementação dos gráficos com FLOT achei melhor dar continuidade e avaliar depois uma alteração ou deixar para novos projetos, quando achei a GEM chamada GoogleCharts, mais auto-explicativa impossível! Muito fácil de usar também. A única desvantagem que vejo em usar essa GEM é o fato dela devolver uma imagem estática com o gráfico, com javascript conseguimos ter algumas “firulas” interativas que os clientes adoram, por outro lado, pra renderizar o JSON no formato que o plugin exige é um pouco mais trabalhoso. #segueadica

Abridor de navegadores!

Jam-Pow! — Tue, 23 Mar 2010 17:53:31 +0000

Pra quem não sabe ou não leu o “About” do Blog, sou desenvolvedor de sites e acho um saco a parte de codificação do front-end, quando tenho que ficar abrindo vários browsers e testar o layout e ver se está igual em todos, pra agilizar um pouco meu trabalho fiz uma BAT onde eu entrava com a url do site e ele abria todos os navegadores (Chrome, Firefox, Opera, Safari e Internet Explorer) já no site certo. Segue o código:

@echo off
echo digite o site:
set /P url=
start \Arquiv~1\Opera\opera.exe %url%
start \Arquiv~1\Mozill~1\firefox.exe %url%
start %APPDATA%\Google\Chrome\Application\chrome.exe %url%
start \Arquiv~1\Intern~1\iexplore.exe %url%
start safari %url%

Mas como sou usuário linux na maior parte do tempo, fiz um shell script para a mesma função, mas para os browsers disponíveis para linux (Chrome, Firefox e Opera).

#!/bin/bash
echo -n "Digite o site: http://"
read site
opera 'http://'$site &
firefox 'http://'$site &
google-chrome 'http://'$site &

Lendo um pouco sobre shell script, vi que poderia usar o Zenity para gerar uma GUI depois de pouco tempo consegui chegar nesse resultado , que me agradou muito porque não é sempre que quero abrir todos os browsers, posso querer testar em um ou dois somente.

#!/bin/bash

options=$(zenity --list \
  --title="Escolha os browsers" \
  --column="" --column="Nome" \
  true google-chrome \
  true firefox \
  true opera \
  --checklist \
  --separator=":")

site=$(zenity --entry \
--title="Abridor de browsers" \
--text="O que vai ser hoje patrão?" \
--entry-text "http://")

echo "$options"|while IFS=":" read f1 f2 f3
do
[ -z $f1] || $f1 $site & # if [! -z $f1]; then; $f1 $site; fi;
[ -z $f2] || $f2 $site &
[ -z $f3] || $f3 $site &
done

O próximo passo é fazer o mesmo pra windows, estou pensando em usar o AutoIt.

Abs

Você é um ninja Gmail?! Qual graduação?

Jam-Pow! — Wed, 01 Jul 2009 03:19:14 +0000

Você usa o Gmail? O quanto dele você usa? Não, não estou falando de espaço em disco, me refiro aos recursos, pois é são realmente muitos, por isso o google inventou essa brincadeira de “ninja Gmail” onde fizeram até um PDF com as funcionalidades listadas por graduação, caso alguém queira deixar do lado da mesa para treinar e se tornar um “Mestre Ninja Gmail”.

Assumo que fiquei espantado ao ver que usava quase tudo, podendo me considerar um quase Mestre Gmail! ahahahah…

E você que nível é?

Abs

Como fazer suas assinaturas randômicas no Gmail com Ruby on Rails

Jam-Pow! — Thu, 04 Jun 2009 01:04:12 +0000

Fuçando um pouco hoje, vi no Gmail uma opção para pegar uma assinatura randômica de um RSS, o endereço que vem padrão tem frases em inglês, procurei um em português, mas não achei nenhum que funcionasse no Gmail, resolvi então botar a mão na massa e fazer o meu próprio XML, no padrão do Gmail, só que não queria ter que cadastrar as frases num banco de dados, ia gerar um trabalho que não disponho de tempo pra fazer, sendo que hoje existem vários sites que disponibilizam feed’s com frases atualizadas diariamente, que são ótimas pros leitores de RSS, mas não funcionam no Gmail, o que eu fiz foi ler um desses RSS’s e renderizar os mesmos dados com os padrões do google, mantendo os links pro site de direito!

Em sua aplicação rails, edite o arquivo config/enviroment.rb e faça os seguintes requires depois do último end.

require 'rubygems'
require 'simple-rss'
require 'open-uri'

Crie um controller que buscará as informações de um XML de algum desses sites de frases e pensamentos

./script/generate controller phrases index

Edite o arquivo app/controllers/phrases_controller.rb deixando-o parecido com isso:

class PhrasesController < ApplicationController
def index
@rss = SimpleRSS.parse open('http://www.algumfeeddefras.es/feed')
end
end

e a sua view (app/views/phrases/index.html.erb) deixe-a como a seguir





Assinaturas Gmail
http://sitedeondevcpegouasfras.es
Minhas assinaturas do gmail
en-us


<% @rss.items[1,9].each do |item| %>




<% if item.description.length >= 89 %>
<%= item.description[0,88] + " ..." %>
<% else %>
<%= item.description %>
<% end %>

<%= item.link %>


<% end %>

Pronto só acessar as configurações do gmail e em signatures marcar a opção “Append a random signature from feed:” e colar a sua URL (http://suaaplicacaorails/phrases) que toda vez que você começar um novo e-mail aparecerá uma frase diferente!

Espero ter ajudado

Hugs!