Fiddler – Debugging proxy

Tenho utilizado com frequência uma ferramenta muito bacana para testar e desenvolver algumas coisas rodando em produção.

Basicamente com ela posso direcionar um determinado endereço de qualquer lugar para apontar para um arquivo no meu pc (local), aí consigo navegar nos sites e ver o meu arquivo rodando lá. Então consigo desenvolver já testando em produção.
Lógico que não é pra qualquer coisa, mas é muito útil em diversos casos e tem me ajudado muito.

Por exemplo, estou desenvolvendo um serviço JS que preciso testar o comportamento em diversas páginas que já estão em produção como hotsites, faq, institucional, carrinho, … e envés de ficar criando vários .htmls ou subindo o JS em produção, só aponto um determinado request pra minha máquina e vou desenvolvendo como se estivesse em produção mas só eu vejo.

Isso é muito legal pra brincar em serviços dos outros também, principalmente quando o JS é encapsulado. ;)

Essa é a versão desktop que é muito mais completa e complexa, tem diversas funcionalidades… eu mesmo só conheço o básico: http://www.telerik.com/fiddler

E tem uma versão muito mais simples pro chrome, mas supre a necessidade na maioria das vezes:

https://chrome.google.com/webstore/detail/fiddler/hkknfnifmbannmgkdliadghepbneplka

Um futuro chamado Web Components

Você já deve ter ouvido falar de “Web Components”. A parada é bastante revolucionária e, pesquisando um pouco sobre o assunto, achei um vídeo muito bacana do Zeno Rocha no BrazilJS do ano passado: https://www.youtube.com/watch?v=7Q0-E_rZ_Cc

E pra quem quiser entender mais sobre isso, os caras criaram um projeto muito bacana que foi criado e é mantido pelo Zeno Rocha, Briza Rocha e uns outros “cascas grossas” da Web como Addy Osmani e Sindre Sorhus

É pessoal, a forma como desenvolvemos front-end vai evoluir e não vai demorar, então é bom já estarmos preparados. Pra quem conhece o AngularJS mas nunca mexeu, vale apena dar uma estudada e começar a se interessar, porque mesmo o Angular vai acabar ficando de lado, mas o conceito de “directives” dele vai continuar.
Então pra quem não entendeu, o Angular hoje é a library que nos permite criar algo muito próximo da ideia dos “Web Components” mas que funciona em determinados navegadores antigos.
E pra quem já quer meter a mão e desenvolver seus próprios “Web Components”, existe um projeto http://www.polymer-project.org/ que, se não me engano, foi criado pelo Google. E também um lugar onde a galera publica os componentes que criaram: http://customelements.io/

Hierarquia de objetos na url

Se você já trabalhou  com Graph API do facebook, talvez tenha curtido a forma como os parâmetros são montados na url assim como eu curti. Basicamente, existe um formato padrão para montar a url e com isso é possível escolher atributos específicos do objeto em questão e também escolher atributos das “conexões” do objeto.

Então vamos a um exemplo para esclarecer:

?fields=name,birthday,albums.limit(2).fields(name)

Neste momento desejamos acessar o nome e a data de aniversário do usuário, também vamos acessar o atributo nome  dos álbuns com limite de 2 álbuns por página. O resultado dessa requisição no Graph API da minha conta seria (lembrando que o facebook sempre adiciona o id):
{
"name": "Thiago Rodrigues",
"birthday": "03/15/1989",
"id": "783260304",
"albums": {
"data": [
{
"name": "Mobile Uploads",
"id": "10150629854170305",
"created_time": "2011-05-21T03:47:57+0000"
},
{
"name": "Untitled Album",
"id": "10152769881865305",
"created_time": "2013-04-14T23:30:03+0000"
}
],
"paging": {
"cursors": {
"after": "MTAxNTI3Njk4ODE4NjUzMDU=",
"before": "MTAxNTA2Mjk4NTQxNzAzMDU="
},
"next": "https://graph.facebook.com/783260304/albums?limit=2&fields=name&after=MTAxNTI3Njk4ODE4NjUzMDU="
}
}
}

Depois dessa simples demonstração da Graph API, vamos ao que interessa. Por ter gostado bastante deste modelo de requisição, iniciei uns códigos para trazer isso para dentro dos meus projetos e saiu isso:
Minha intenção é fazer dentro do Django utilizando Tastypie então também criei um parse em python:

Como criar função noConflict

Outro dia estava criando uma biblioteca e precisei criar uma função para resolver o problema de ter mais de uma versão rodando.

A função “noConflict” é muito simples de criar e também pode ser bastante útil. O exemplo mais conhecido é no jQuery.
Para começar resolvi analisar como o pessoal costuma fazer e encontrei uma excelente solução no Backbone.
Depois foi fácil trazer para um uso prático.