Home- Resume
- Blog
- GitHub
- RSS
- Twitter
- Flickr
- Vimeo
- Youtube
- I'm reading
- My Foursquare
- My Tripit
- Tumblr
- Facebook
-
Info
- SummaryInvolved with programming for 7 years. During this time, I have developed skills in many languages and platforms.
Commenced my programming studies at college, in a Web Development Technical Course (2004-2005) which was focused on ASP and PHP languages.
After that (2005-2007), started another technical course in Industrial Automation, where I learned Assembly, Ladder, C, C++, Microelectronic and Pneumatics.
Started to work with Web Development in early 2007 at Prima, working mainly with Javascript, ASP and SQL Server. In late 2007, I worked at Medialine, also as a Web Developer, working mainly with front-end development.
In 2008, worked at W3BOX, which I helped to improve their framework and introduced them to new frameworks such as jQuery and Ruby on Rails. In 2009, I started my studies in Agile Development and helped them to successfully deploy Scrum. I've also organized many Coding Dojos and spoken
at many internal events within the company.
Started coursing Information Security degree at Unisinos (2009) which is stopped at the moment.
Later, in August 2010, went on an exchange to Dublin, Ireland where I am living now.Specialties: Javascript/jQuery, Ruby/Rails, Git, TDD, BDD, CSS, HTML, *nix Relational and NoSQL Databases.Experience- Jul 2011 - PresentProgrammer / Applicake.comRuby/Javascript
- Nov 2010 - Jun 2011Developer / Dublin City UniversityPHP/Ruby programmer
- Jan 2008 - Jul 2010Developer / W3BOXW3BOX is a Brazilian startup who has great software solutions in Supply Chain, CMS and Custom Software development. I worked with them since the very beginning. I helped them to improve their framework and worked mainly with Javascript, ASP and SQL Server.
Was instructor of internal training for jQuery, SVN, CSS and Ruby on Rails and introduced them to Agile Development, who was successfully deployed later. I have also spoken at internal events and organized many Coding Dojos. - Sept 2007 - Dec 2007Developer / MedialineWas in charge of website maintenance and I worked mainly with Javascript, ASP and HTML/CSS.
- Jan 2007 - Sept 2007Developer / PrimaWorked as a Web Developer mainly with Javascript, ASP and SQL Server. I was in charge of maintenance and improving a CRM and a Email Marketing web application.
Education-
2008 - 2012Universidade do Vale do Rio dos SinosInformation Security
-
2005 - 2007SENAITechnician in Industrial Automation
-
2004 - 2005Colégio Luterano ConcórdiaTechnician in Informatics Technician
Additional Information-
Websites:
-
Interests:ruby, ruby on rails, javascript, jquery, node.js, tdd, bdd, agile methodologies, nosql databases, cocoa and objective-c, iphone programming
-
Posts
- Mar 01, 11
In my spare time (1h per day), I’ll try to study a new thing every day and after that, create a post about it in this blog. The “new” thing of the week is Redis. At the same time, I’ll practice my writing (and english) skills, so if something is unclear, just leave a comment. I’ll appreciate it.
Goals
To not forget why I’m spending this hour, I set some goals before I start. And they are:
What is Redis?
Redis is a key-value store, also known as NoSQL database. Basically it stores data as ‘value’ inside a ‘key’. This data can later be retrieved only if we know the exact key used to store it.
Installation
I don’t want to detail the installation process, but if you’re using a Mac and Homebrew, just type
brew install redisand that’s it!How to use Redis
The basic commands are SET and GET.
SET stores the data into a key. For example:
SET server:name "fido"
will store the value “fido” inside the “server:name” key and we can retrieve that key later with the GET command:
GET server:name => "fido"
If you try to retrieve a non existent key, Redis will return null:
GET server:ip => null
And the opposite of SET is DEL, that deletes the given key from the database.
Redis also has other cool stuff like Lists, Sets, Hashs and Ordered Sets. You can try this stuff online on http://try.redis-db.com (highly recommended) or check out the documentation online on http://redis.io/documentation.
What can I use Redis for?
Anything? I don’t think so, but there is collection of Redis use cases in this post. Some of them I like the most are URL Shortener Service and Who is online.
Conclusion
I’m still thinking on what will be my Redis use case. Anyway, I see a lot of projects using Redis to manage background tasks, but what I can conclude now is that Redis is fast!!!. Try to run
redis-benchmark -q -n 100000in the command line and you’ll see how fast it is.And that’s it. The next post will be about Redis as well, probably about resque, or something related.
- Jan 03, 11
Lists
Lists are very useful. Take a look a this example:
$ mv README.txt README.markdown
A better way to do this using lists is:
$ mv README.{txt,markdown}
This will do the same thing as the first example.
Bang-bang
“!!” repeats the last command. This is useful in situations like this:
$ cp some_file.txt /some_directory_you_do_not_have_permission cp: some_file.txt: Permission denied
Aw crap! Instead of typing everything again or type combos like
up-arrow + crtl-A + sudo, just type:$ sudo !!
Bang-bang! Problem solved.
Another bang-like thing is the
!$. This repeats the very last argument of the previous command. For example:$ touch README.txt $ mate README.txt
Too much typing. Why not use !$ instead?
$ touch README.txt $ mate !$
Done.
And you, what are your terminal tricks?
- Nov 02, 10
I really don’t like the way we write normal Javascript confirmation messages, like this:
if ( confirm('Are you sure?') ) { // do the stuff }
So, I was wondering if this could be done in a more ‘functional’ way, like this:
confirmIf('Are you sure?', function() { // do the stuff });
Much better I think. Here is the function:
function confirmIf ( message, callback ) { if ( confirm(message) ) { return callback(); } return false; }
What do you think?
- Oct 22, 10
Estou iniciando meus estudos com desenvolivmento de jogos em Javascript e pretendo iniciar uma série de posts relacionados ao que aprendi durante esse tempo.
Para começar, veremos um pouco da API do canvas e de como ela pode nos ajudar a desenvolver jogos em Javascript.
Porque canvas?
Falando em jogos no browser, um elemento fundamental a se entender é o canvas. Ele que vai nos permitir desenhar objetos na tela e também movimentá-los, criar animações e etc…
Além do mais, ele é compatível com os browsers mais modernos (IE9, Firefox, Safari, Chrome), e para os mais antigos, existe uma biblioteca que contorna esse problema.
Desenhos simples
Para desenhar com o canvas, primeiro precisamos do elemento no nosso HTML, como esse aqui:
<!DOCTYPE html> <html> <head> <title>Canvas</title> </head> <body> <canvas id="canvas" width="960" height="480"> </canvas> <script type="text/javascript" charset="utf-8"> // Codigo aqui </script> </body> </html>
Feito isso, podemos manipular o canvas através do Javascript, veja esse exemplo:
var canvas = document.getElementById("canvas"); var paper = canvas.getContext("2d"); function draw() { paper.fillRect(10, 10, 100, 100); } draw();
Algumas coisas que temos que entender aqui. Primeiro, existe o elemento HTML do canvas na primeira linha. Depois, escolhemos um contexto para o nosso canvas (no caso 2d) com o getContext(). Esse contexto 2d que vai definir qual a API a ser utilizada nos nossos desenhos.
Um método dessa API é o fillRect, que basicamente desenha um retângulo na tela. Os dois primeiros parâmetros são a posição na tela, no caso X e Y, e os dois últimos são o tamanho do nosso retângulo (um quadrado, na verdade). Todos os parâmetros são em pixels.
Não vou entrar em detalhes de toda a API de desenho do canvas, mais informações você pode conferir aqui. Mas existe uma em especial que quero dar mais foco. Veja o exemplo abaixo:
function draw() { paper.beginPath(); paper.moveTo(10, 0); paper.lineTo(20, 30); paper.lineTo(0, 30); paper.closePath(); paper.stroke(); } draw();
No exemplo acima, estamos criando um desenho mais customizado. O método beginPath() diz ao canvas que vamos começar um desenho usando as APIs do PATH, que podemos associar a um “lápis” na tela.
O moveTo() move nosso “lápis” para o ponto 10,0 (x,y). A partir do ponto 10,0, desenhamos uma linha com o método lineTo() para o ponto 20,30. Neste momento, é como se fosse desenhada uma linha mesmo. O mesmo fazemos depois para o ponto 0,30. O método closePath() fecha automaticamente nosso desenho para o ponto inicial, no caso 10,0.
O método stroke() finaliza o desenho. Se você não chamá-lo ao final, seu desenho não aparecerá na tela. Isso porque o método lineTo() apenas adiciona as coordenadas numa fila, que depois são finalmente desenhadas com o stroke().
Animando
Para darmos mais vida ao nosso player, utilizaremos dois métodos do canvas: translate e rotate.
function draw() { paper.translate(30, 30); paper.rotate(0.1); //... }
O método translate() move o canvas inteiro para a posição X,Y passada nos argumentos. Já o rotate(), gira o canvas inteiro para o ângulo passado (em radianos). Essas duas chamadas dos métodos devem ser colocadas antes do beginPath(). Se colocarmos as chamadas depois do stroke(), nada vai acontecer, porque as transformações com translate() e rotate() só afetam os próximos desenhos.
Vamos trocar a chamada do draw() no fim do nosso script para isso:
setInterval(draw, 200);Agora você deve ter visto que nosso player se “move” na tela, mas não do jeito que esperávamos, porque o desenho antigo não é apagado da tela. Isso porque a cada 200 milisegundos estamos criando um novo desenho e não movendo o player de verdade. Para corrigir isso, chamamos o método clearRect(x, y, width, height) no início do método draw(). Esse método limpa todos os pixels dentro do retângulo passado.
O código final você pode ver abaixo:
var canvas = document.getElementById("canvas"); var paper = canvas.getContext("2d"); function draw() { paper.clearRect(0, 0, 960, 480); paper.translate(30, 30); paper.rotate(0.1); paper.beginPath(); paper.moveTo(10, 0); paper.lineTo(20, 30); paper.lineTo(0, 30); paper.closePath(); paper.stroke(); } setInterval(draw, 200);
Essa ainda não é a forma ideal de movermos nosso player na tela, principalmente porque estamos movendo o canvas inteiro e não só o player. Se tivermos outros desenhos na tela, você vai ver que eles se moverão junto com o nosso player, e isso não é o ideal. Falarei mais sobre este problema e como evitá-lo no próximo post da série.
Concluindo
Até aqui conseguimos entender um pouco do canvas, e de como sua API nos permite fazer coisas bem interessantes. Também já conseguimos ter uma boa idéia de como vai ser nosso jogo e de como podemos estruturá-lo.
No próximo post continuaremos nossa série, falando mais sobre a estrutura do nosso jogo e de como manipular nosso player com o teclado.
Até lá!
- Aug 05, 10
O contenteditable é uma das novas funcionalidades do HTML5. Ela permite que o usuário consiga editar o conteúdo do elemento, como se fosse um daquels editores WYSIWYG. Para utilizar, basta adicionar o atributo
contenteditable="true"no elemento:<ul contenteditable="true"> <li>Item 1</li> <li>Item 2</li> </ul>
Neste exemplo, ao clicar na lista, aparecerá algo parecido com uma
textarea, tornando o conteúdo editável, como se fosse um editor de textos.Adicionando eventos
Como saber o momento que o usuário terminou de editar o texto dentro do nosso conteúdo editável? Simples. Como o elemento se transforma em uma “
textarea”, podemos utilizar os mesmos eventos de um input padrão do HTML. Veja este exemplo:<!DOCTYPE html> <html> <head> <title>contenteditable</title> <style type="text/css" media="screen"> *[contenteditable]:hover { background-color: #F9F9F9; } </style> </head> <body> <div contenteditable="true">Edit me!</div> <ul contenteditable="true"> <li>Item 1</li> <li>Item 2</li> </ul> <div id="log"></div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("[contenteditable]").bind('focus', function() { $(this).data('original-text', $(this).text()); log(this, 'focus'); }); $("[contenteditable]").bind('blur', function() { log(this, 'texto alterado de "' + $(this).data('original-text') + '" para "' + $(this).text()); }); }); function log (el, msg) { console.log(el, msg); $("#log").append("-> " + msg + "<br/>"); } </script> </body> </html>
Ao clicar na
divcom o atributo contenteditable por exemplo, é disparado o eventoonfocus. Se logo após clicarmos em outra área do HTML (fora da nossadiv), é disparado o eventoonblur. Isso você pode acompanhar no log logo abaixo.No Javascript logo no fim do arquivo, estamos adicionando eventos (com jQuery) a todos os elementos que tiverem o atributo contenteditable. Os eventos são
focuseblur, respectivamente relacionados aos eventos nativos do Javascriptonfocuseonblur. Um outro exemplo pode ser visto aqui.Um curiosidade é que esta funcionalidade existe desde o IE 5.5, inclusive foi a Microsoft que padronizou e implementou esta funcionalidade. Mas como a documentação era apenas superficial, só agora esta funcionalidade está sendo padronizada pelo W3C.
Outro detalhe é que é possível executar coisas como
execCommanddentro de elementos com contenteditable. Essass funções são utilizadas pelos editores WYSIWYG, para adicionar negrito, itálico, etc… essas coisas.Mais detalhes sobre o atributo podem ser conferidos neste post.
Update: O Juan Maiz deu uma dica legal de um editor WYSIWYG totalmente em HTML5, segue o link: http://aloha-editor.com/
- Aug 03, 10
Existem duas formas de se criar uma Struct em Ruby. Uma delas é simplesmente atribuindo a uma constante:
Color = Struct.new(:color, :hex) do def metodo end end
E a outra seria com herança:
class ComplexColor < Struct.new(:color, :hex) def metodo end end
Notei que muita gente ou fazia de um jeito, ou fazia de outro, e fui atrás pra ver se realmente tinha alguma diferença, ou se era apenas uma questão de “sintax sugar”. E tem diferença!
A diferença principal é que, quando criamos uma struct com herança, estamos colocando uma struct anônima na hierarquia de ancestrais do nosso objeto:
>> Color.ancestors => [Color, Struct, Enumerable, Object, Kernel] # herança normal >> ComplexColor.ancestors => [ComplexColor, #<Class:0x100cb7838>, Struct, Enumerable, Object, Kernel] # ahá!
E isso faz também com que os membros (métodos getters e setters) da struct fiquem na classe pai:
>> Color.instance_methods(false) => ["color", "hex", "color=", "hex=", "description"] # normal >> ComplexColor.instance_methods(false) => ["description"] # ops? >> ComplexColor.superclass.instance_methods(false) => ["color", "hex", "color=", "hex="] # ahá!
Claro que isso não faz muita diferença, afinal ao chamar qualquer método dos membros da struct, o Ruby vai subir um nível na hierarquia se ele não achar o método na classe atual.
Agora se você gosta de fazer micro-otimizações, talvez isso faça algum sentido, já que estamos economizando alguns pentelhésimos de segundo nas execuções sem herança.
- Aug 01, 10
Recentemente tive que atualizar a versão do meu zsh com o homebrew, e não foi tão fácil como eu imaginei. Isso porque a versão instalada pelo homebrew, não é instalada no diretório padrão
/bin.Encontrei a solução e fiz um tutorial rápido, caso você também encontre esse problema.
brew install zsh
Depois de tudo compilado e instalado (thanks homebrew), você terá que alterar o shell padrão para usar o novo zsh com o comando:
chsh -s /usr/local/bin/zsh
Neste momento aparece a mensagem “
chsh: /usr/local/bin/zsh: non-standard shell”. Isso acontece porque a versão do homebrew não está habilitada para ser usada como shell. Para habilitar, adicione a seguinte linha no fim do arquivo/etc/shells:# /etc/shells /usr/local/bin/zsh
Feito isso, altere o shell padrão com:
chsh -s /usr/local/bin/zsh
Feche e abra novamente o terminal e o zsh está instalado.
- Jun 09, 10
Update: Parece que a gem
Saikurooriginal não funciona bem com ametric_fu, por isso é necessário instalar o fork do devver e também atualizar a configuração do metric_fu na linha 10. Confira logo abaixo.Update2: Atualizado para a versão 1.4.0 da gem metric_fu.
metric_fué uma gem que serve pra analisar o código da sua aplicação. Ela faz a análise utilizando diversas métricas conhecidas, como por exemplo, cobertura de testes, complexidade ciclomática, code smells e etc…Essa gem é um conjunto de outras gems, em que cada uma delas é responsável por um tipo de métrica. O que a
metric_fufaz, é agrupar todas em um lugar só, provendo um html único para acessar as métricas geradas.Instalando
Para instalar a gem e suas dependências, basta rodar o comando
gem install.gem install metric_fu => Successfully installed metric_fu-1.4.0 => 1 gem installed
Depois de alguns testes, descobri que a gem Saikuro original não funciona bem com o
metric_fu(sequer rodou as análises do código), para corrigir isso, instale o fork dodevver(link no github):gem install devver-Saikuro => Successfully installed devver-Saikuro-1.2.0
Na versão 1.4, foi adicionado suporte a gem rails_best_practices, que verifica a qualidade do código da sua aplicação de acordo com as melhores práticas. Mais informações nessa apresentação.
gem install rails_best_practices => Successfully installed rails_best_practicesGerando as métricas
A
metric_fuutiliza o Rake para gerar as métricas e por isso, recomendo criar o arquivometric_fu.rakefiledentro delib/taskscom o seguinte conteúdo (gist aqui):require 'metric_fu' MetricFu::Configuration.run do |config| config.metrics = [:churn, :saikuro, :stats, :flog, :flay, :reek, :roodi, :rcov, :rails_best_practices] config.graphs = [:flog, :flay, :reek, :roodi, :rcov, :stats, :rails_best_practices] config.flay = { :dirs_to_flay => ['app', 'lib', 'spec'], :minimum_score => 10, :filetypes => ['rb'] } config.flog = { :dirs_to_flog => ['app', 'lib'] } config.reek = { :dirs_to_reek => ['app', 'lib'] } config.roodi = { :dirs_to_roodi => ['app', 'lib'] } config.saikuro = { :output_directory => 'tmp/metric_fu/scratch/saikuro', :input_directory => ['app', 'lib'], :cyclo => "", :filter_cyclo => "0", :warn_cyclo => "5", :error_cyclo => "7", :formater => "text" } config.churn = { :start_date => "1 year ago", :minimum_churn_count => 10 } config.rcov = { :environment => 'test', :test_files => ['test/**/*_test.rb', 'spec/**/*_spec.rb'], :rcov_opts => ["--sort coverage", "--no-html", "--text-coverage", "--no-color", "--profile", "--rails", "-Itest:spec", "--exclude /gems/,/Library/,spec"], :external => nil } config.graph_engine = :bluff end
Feito isso, basta rodar o comando
rake metrics:all.rake metrics:allO comando Rake irá abrir automaticamete o browser depois de rodar as métricas, e você pode encontrá-las dentro do diretório
temp/metric_fu/output/index.html.Vale ressaltar que as configurações estão utilizando o
Rspece oTest::Unit. Caso não existam algum deles, basta remover doconfig.rcov(linhas 20 e 27) as referências ao framework de testes que você não está utilizando. Mais configurações podem ser encontradas aqui.Concluindo
Pelo que notei, as métricas só são armazenadas uma vez por dia, não tenho certeza se isso é configurável (se você conhece alguma configuração que mude isso, por favor poste nos comentários).
Vale a pena dar uma olhada nas gems que a
metric_fuengloba (Saikuro, Flog, Flay, Rcov, Reek, Roodi, Churn e rails_best_practices) para entender mais o que é cada métrica e se quiser, rodá-las em separado.Métricas geralmente são boas, mas não se deve usá-las como regra, apenas como referência. Muitas métricas podem acabar não sendo totalmente verdade (como 100% de cobertura de testes, por exemplo), por isso devem ser usadas apenas como um aviso.
Para mais informações sobre a gem, acesse o site aqui.
Links
- Jun 08, 10
Já me peguei várias vezes fazendo algo parecido com isso:
$('td').removeClass('normal'); $('td').addClass('selecionado');
Então, para facilitar, criei um plugin:
jQuery.fn.extend({ replaceClass: function(original, replace) { return this.each(function() { jQuery(this).removeClass(original); jQuery(this).addClass(replace); }); } });Agora consigo fazer:
$('td').replaceClass('normal', 'selecionado');
Espero que sejá útil.
- May 11, 10
O jQuery possui algumas formas para iterar sobre coleções (arrays, objetos e elementos) utilizando os métodos
$.each,$.mape$.grep. Esses métodos são bem parecidos, porém cada um tem um uso específico.$.eachO método
$.eachserve para passar (iterar) por cada elemento de um objeto e fazer uma determinada ação. Essa ação é feita com um callback (função anônima), que é chamada em cada elemento. O$.each espera dois parâmetros: o primeiro é o objeto e o segundo é o callback, este que, fornece dois parâmetros, o primeiro é o índice (se for um array) ou propriedade (se for objeto), e o segundo o próprio elemento:// Iterando em um array $.each(['a','b','c'], function(index, element) { console.log(index, element); }); => 0, 'a' => 1, 'b' => 2, 'c' // Da mesma forma com objetos $.each({ 'nome': 'Edward Hill', 'musica': 'Trolololo' }, function(key, value) { console.log(key, value); }); => 'nome', 'Edward Hill' => 'musica', 'Trolololo'Duas dicas: para parar em qualquer momento a execução do
$.each, o callback deve retornarfalse, já se for preciso apenas "pular" um elemento e continuar a execução, o callback deve retornartrue:// Para a execução se encontrou um 'b' no array $.each(['a','b','c'], function(index, element) { if(element === 'b') { return false; } console.log(element) }); => 'a' // Já aqui, ele 'pula' a execução se encontrou um 'b', e continua para os outros elementos do array $.each(['a','b','c'], function(index, element) { if(element === 'b') { return true; // observe o true aqui } console.log(element) }); => 'a' => 'c'Uma forma de usar o
$.each(talvez a mais utilizada), é com elementos do DOM, e aqui que a coisa fica mais interessante. A estrutura e o funcionamento são os mesmos, a diferença é que o$.eaché executado a partir de uma coleção de elementos do jQuery:// Itera sobre todos os elementos forms encontrados $('form').each(function(index, element) { console.log(this); }; => <form ...> => <form ...> => <form ...>$.mapO método
$.maptem um objetivo diferente do$.each. Ele também executa um callback para cada elemento, porém só retorna o que for especificado no retorno. Se não for preciso retornar alguma coisa, o callback deve retornarnull:// Retorna somente os elementos pares $.map([4, 5, 6], function(element, index) { return element + 4; }); => [8, 9, 10] // Retorna somente os elementos pares. Funciona como um 'filtro' no array $.map([4, 5, 6], function(element, index) { return element % 2 === 0 ? element : null; }); => [4, 6]Assim como o
$.each, o$.mappode ser usado com elementos do DOM. Aqui as possibilidades são infinitas, vai da criatividade de cada programador. Algumas formas de uso:// Cria um array com todos os atributos "method" dos formulários $('form').map(function() { return $(this).attr("method"); }); => ["get", "post", "post", "get"] // Retorna todos os forms que o método form igual a GET $('form').map(function() { return $(this).attr("method").toLowerCase() === "get" ? this : null; }); => [<form method="get">, <form method="get">]Resumindo, qualquer coisa diferente de
null, será retornada pelo método$.map.$.grepO método
$.grepé praticamente um$.map, porém mais específico. A idéia do$.grepé utilizar o callback como um filtro para o array, mais ou menos como o$.mapfaz, porém tem duas diferenças: a) só funciona com arrays; b) só retorna os elementos que passarem em uma determinada condição. Em outras palavaras, o callback deve retornartrueoufalse, e se o retorno fortrue, o elemento do array é retornado:$.grep([1, 2, 3, 4], function(elemento) { return elemento > 2; }); => [3, 4]Uma forma de fazer isso com elementos do DOM é com o método
filterdo jQuery:// HTML <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> // o filter funciona como um $.grep, só que para elementos do DOM $('li').filter(function() { return $(this).text() === "Item 2"; }).addClass('red'); // HTML depois <ul> <li>Item 1</li> <li class="red">Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>Conclusão
Para não se confundir em quando usar cada método, tenha em mente isso:
- O
$.eachexecuta um callback em cada elemento (array, objeto, ou elemento do DOM), e sempre retornará todos os elementos; - O
$.mapfunciona da mesma forma que o$.each, com a diferença que você pode especificar o que será retornado; - O
$.grepsó funciona com arrays, e para retornar um elemento do array, o callback deve retornartrue; - Para usar algo similar ao
$.grep, mas como elementos do DOM, o jQuery disponibiliza o métodofilter;
Documentação
- Documentação do $.each com qualquer tipo de elemento e o each com elementos do DOM;
- Documentação do $.map com qualquer tipo de elemento e o map com elementos do DOM;
- Documentação do $.grep;
- Documentação do filter;
- O
- Feb 18, 10
Já faz um tempo que venho procurando uma biblioteca para testes unitários em Javascript que seja fácil de utilizar. Uns posts atrás, falei um pouco sobre a JsUnitTest, que você pode conferir aqui e aqui.
Neste post pretendo mostrar um pouco da biblioteca QUnit.
O que é QUnit
De acordo com o site do projeto: "QUnit é uma suite de testes em Javascript, poderosa e simples de usar". Está sendo utilizada principalmente para testar o projeto jQuery e alguns plugins, mas é capaz de testar qualquer código Javascript genérico.
Usando QUnit
QUnit é realmente simples de usar. Você precisa basciamente incluir os arquivos qunit.js e qunit.css e ter uma estrutura básica de HTML para que a biblioteca funcione corretamente. Um exemplo pode ser conferido aqui.
Ao abrir este exemplo, você deve ver uma tela parecida com essa:
Exemplo de teste
Os blocos de teste são feitos com o método test que espera 2 parâmetros: o primeiro com o nome do teste e o segundo com uma função contendo as asserções:
test("um teste simples", function() { ok(true, "tem que passar"); });O que resulta isso:
O método ok, verifica se o primeiro parâmetro é
true, similar aoassertda JsUnitTest. Se trocarmos parafalseo primeiro parâmetro do ok, veremos essa tela:Dica: Para ver qual asserção falhou dentro do teste, é só clicar no nome do teste.
Conhecendo o ambiente básico, podemos passar pra algo mais específico.
Outro exemplo
Veja o exemplo abaixo:
module("modulo simples", { // executa um código específico antes de cada teste setup: function() { this.setup_var = true; }, // executa um código específico depois de cada teste teardown: function() {} }); test("um teste com ok", function() { ok(this.setup_var, "testa a variavel criada no setup"); }); test("um teste com equals", function() { equals($("h1").length, 1, "deve ter um elemento h1"); equals($("h2").length, 2, "deve ter dois elementos h2"); }); module("outro modulo"); test("um teste com same", function() { same([1, 2, 3], [1, 2], "same verifica todas as propriedades ou elementos recursivamente"); });O método module serve como um "agrupador" de testes, separando os testes em módulos (óbvio, dãã). É possível passar um parâmetro adicional com as funções
setupeteardown. A funçãosetupé executada antes de cada teste, já ateardowné executada depois de cada teste.Existem outros métodos de asserções que são o equals(atual, esperado, mensagem) e o same(atual, esperado, mensagem). Basicamente eles testam se o primeiro parâmetro é igual ao segundo, com a diferença que o same é mais preciso, e testa todas as prorpiedades dos parâmetros passados recursivamente, o que é útil principalmente com arrays e objetos.
Conclusão
A biblioteca QUnit se mostrou muito simples de usar nos testes que fiz, cumprindo sua promessa. Recomendo para quem quer iniciar algo com testes unitários em Javascript, principalmente por ela ser muito fácil de usar e quem já está habituado com o mundo do TDD não vai ter nenhuma dificuldade em se adaptar.
Gostei, quero me informar mais. O que faço?
Você pode conferir a documentação mais detalhada no site do jQuery, ou pode acompanhar este blog, que em breve estarei postando mais artigos relacionados ao QUnit e testes em geral.
- Feb 09, 10
Este post é uma tradução livre do post "Separate Estimating from Committing" de Mike Cohn.
Um problema fundamental e comum em muitas organizações é que as estimativas e os compromissos são considerados equivalentes. A equipe de desenvolvimento (ágil ou não) estima que a entrega de um determinado conjunto de funcionalidades levará sete meses com os recursos disponíveis. Os membros da equipe informam essa estimativa para o seu gerente, que passa a estimativa ao vice-presidente, que então informa o cliente. E, em alguns casos, a estimativa é "podada" ao longo do caminho para prover à equipe uma "meta elástica".
O problema aqui não é que a estimativa da equipe de sete meses esteja certa ou errada. O problema é que a estimativa foi transformada em um compromisso. "Estimamos que isso levará sete meses", foi traduzido para "Nos comprometemos a terminar em sete meses". Estimar e se comprometer são ambos importantes, mas devem ser vistos como atividades separadas.
Precisei buscar minha filha na natação esta noite. Perguntei a ela em que horas ela estaria pronta (o que nós definimos como: término da natação, tomar banho, e estar pronta para ir para casa). Ela disse, "Eu devo estar pronta pelas 5:15". Essa era a sua estimativa. Se eu tivesse pedido para ela se comprometer - estar fora das instalações até aquela hora ou eu iria embora - ela poderia ter se comprometido para as 5:25, para dar tempo de resolver eventuais problemas, como uma prática um pouco mais longa, o relógio do treinador estar atrasado em cinco minutos, fila nos chuveiros, e assim por diante. Para determinar um tempo no qual ela poderia se comprometer, ainda assim ela teria feito uma estimativa. Mas ao invés de me dizer sua estimativa diretamente, ela teria transformado-a em um prazo no qual poderia comprometer-se.
Não deixe que suas estimativas se tornem compromissos. Lembre-se da diferença entre uma estimativa e um compromisso e mantenha as duas atividades separadas, instruindo os gerentes e os clientes, se necessário. Eu falo muito mais sobre estimativa ágil e compromisso no meu novo livro, "Succeeding with Agile".
- Jan 28, 10
Este post é uma tradução livre do artigo "Step one is admitting you have a problem" de David Heinemeier Hansson
O mundo das startups está repleto de pessoas viciadas em trabalho e esse vício muitas vezes tem um preço caro: amizades perdidas, relacionamentos acabados, saúde ruim, e falta de interesse em outros assuntos. Tudo o que importa é a próxima tarefa de trabalho, o próximo negócio, a próxima etapa, a próxima rodada de financiamento.
Se você tivesse um vício semelhante a cocaína ou o álcool, as pessoas iriam chamá-lo de doente e aconselhá-lo a procurar ajuda. Mas no mundo das startups, esse vício é elogiado por muitos. Você é considerado um herói por apostar todas as suas fichas da vida na esperança de que você vai acertar um royal flush.O pior é que a maioria desses viciados sabem conscientemente que a jornada de 14 horas de trabalho não é realmente uma forma muito produtiva de seguir em frente. Que mais tempo não significa trabalho mais valioso. Jason Cohen aborda este assunto em: "Sacrifice your health for your startup". Ele reconhece que a privação do sono não é muito útil, mas ainda vê como um distintivo de honra, que o trabalho extra provavelmente não faz produto de qualidade, mas de certa forma ainda precisa existir.Ele fala com a voz da razão, mas age como um viciado. Desesperado para encontrar uma justificativa para os seus caminhos, ele diz: Você não precisa ser nada além de trabalho porque você já tem que fazer muitos papéis. Você precisa ter uma obsessão única com o trabalho porque o nirvana da "liberdade financeira" está a apenas alguns passos à frente.Ser viciado em seu trabalho pode ser um pouco melhor do que um vício em cocaína, mas segue o mesmo padrão de abuso e de escapismo. E o mais importante, não é um requisito para o sucesso. Você não precisa se tornar um viciado para abrir uma startup. Apenas seja apaixonado, obcecado, mas não deixe que isto seja uma desculpa para consumir a sua vida. - Dec 09, 09
A biblioteca JsUnitTest, que mostrei no post anterior, oferece uma forma simples para testar funções que são executadas de modo assíncrono - como
setIntervalesetTimeout- através do métodowaitwait(tempo_em_milisegundos, bloco_de_codigo);
O método
waitespera o tempo determinado em milisegundos e executa o bloco de código, que nada mais é do que uma função anônima. Um exemplo de teste:testAsync: function() { with(this) { var executou = false; var timeout = setTimeout(function() { executou = true; }, 10); wait(100, function() { assert(executou); });}}O teste é simples, depois de 10 milisegundos a variável
executourecebetrue. A asserção que ficou dentro do métodowaitsó é executada depois de 100 milisegundos, um tempo um pouco maior, apenas para dar uma segurança. - Nov 26, 09
Na busca por uma soulção simples para Test-driven Development em Javascript, me deparei com o projeto JsUnitTest ou JavaScript Unit Testing framework.
O projeto foi criado pelo Dr. Nic e é extremamente simples e muito útil. Mais detalhes podem ser vistos aqui.
Instalação
Faça o download do projeto em tar ou zip e descompacte. Podemos ver três arquivos:
assets/jsunittest.js assets/unittest.css example_test.html
Logo depois, abra o arquivo
example_test.htmlno browser para checar se está tudo ok.Agora é só linkar o arquivo da sua biblioteca Javascript e sair testando.
Criando testes
No exemplo podemos ver o método
testTruthcom uma asserção e aí entra um detalhe importante: apenas os métodos que iniciem comtestserão executados pelo framework.Podemos criar mais um teste logo abaixo:
testColor: function() { with(this) { assertEqual('Green', Mushroom.color) }}Obviamente este teste irá falhar, então vamos criar um objeto rapidamente só para passar nos testes:
var Mushroom = { color: 'Green' }Agora os testes passaram e você pode tomar seu chá de cogumelo!
Bom, essa é apenas uma introdução. Pretendo cobrir mais pontos interessantes desse framework de testes nos próximos posts.
- Nov 19, 09
Digamos que você precise executar uma determinada função a cada 2 segundos, ou algo que precise ser repetido de tempos em tempos, como por exemplo um timer.
Em Javascript isso é possível através das funções
setIntervaleclearInterval, e seu uso é bem simples, veja:var hello = setInterval(function() { console.log('Hello world!'); }, 2000); // a cada 2 segundos (tempo em milisegundos), escreve no console 'Hello world!'O primeiro parâmetro da função
setIntervalrecebe uma função anônima que será executada de tempos em tempos, e o tempo entre cada execução é dado pelo segundo parâmetro. Este tempo está em milisegundos.Note que atribuímos o retorno da função
setIntervalà variável hello, por que isso? Porque a funçãosetIntervalretorna um identificador - que é um número qualquer - e este número é usado na funçãoclearInterval, para interromper o timer associado.// para a execução clearInterval(hello);
A função
clearIntervalinterrompe o timer associado á variavel passada. Somente isso.Podemos reaproveitar essa função, passando-a por referência:
function hello() { console.log('Hello world!'); }; var intervalo = setInterval(hello, 2000); var intervalo_longo = setInterval(hello, 5000); // ... clearInterval(intervalo); clearInterval(intervalo_longo);Caso essa função precise de parâmetros, podemos passá-los logo após os dois primeiros:
function mensagem(msg) { console.log(msg); } setInterval(mensagem, 2000, 'Hello World!'); setInterval(mensagem, 2000, 'Hello Moon?');Ou seja, todos os parâmetros após os dois primeiros, serão passados para função mensagem.
Atenção
Nunca faça algo assim:
setInterval("alert('Hello World!')", 1000);Passando uma string para a função
setInterval, tem o mesmo comportamento que oeval, e como sabemos, ‘Eval is Evil’.Também tome cuidado ao criar muitos timers, se houverem muitos simultâneos, o browser simplesmente trava!
- Nov 19, 09
gem server
Quer acessar a documentação (rdoc) das gems instaladas facilmente? Simples, vá ao terminal e digite:
~$ gem server => Starting gem server on http://localhost:8808/
Pronto, você acabou de subir um servidor de gems na sua máquina! Acessando a url http://localhost:8808/ e você verá a documentação de todas as gems instaladas na sua máquina.
E não é só isso, outras pessoas podem baixar e instalar gems que estão na sua máquina, simplesmente digitando:
~$ gem install SUA_INCRIVEL_GEM -s http://SUA_MAQUINA:8808
Mudando o tema do RDoc
Eu particularmente não gosto muito do tema padrão do RDoc, e se você concorda comigo, siga os seguintes passos:
Instale a gem ‘hanna’
A gem hanna cria um tema diferente para a documentação das suas gems, e sua instalação é simples:
~$ sudo gem install hanna => Successfully installed hanna-0.1.12
Mude o template padrão
Para trocar o template padrão ao instalar uma gem (comando gem install), edite o arquivo .gemrc:
rdoc: --inline-source --line-numbers --format=html --template=hanna
Atualize a documentação das suas gem com o novo template
Para atualizar os arquivos de documentação com o novo template, digite no terminal:
~$ sudo gem rdoc --all --no-ri
Isto irá gerar todos os arquivos de documentação das gems novamente (pode demorar um pouco).
Gem Server novamente
Agora se você subir o servidor de gems novamente, verá que o tema ficou muito mais interessante! (exceto pela primeira página que ainda tem o tema antigo).
Mesmo assim ainda é muito chato ter que entrar no terminal o tempo todo e subir o servidor de gems. Pensando nisso, Jason Seifer postou uma forma muito legal de acessar o RDoc das suas gems nesse tutorial (alguns passos já foram descritos aqui).
-
Repositories
- 1 fork / 1 watcher / Pushed Jan 16, 12
- A MacRuby application that list all host aliases in OS X Directory Services1 fork / 1 watcher / Pushed Jun 02, 11
- Stay updated of those who stopped following you on Twitter!2 forks / 3 watchers / Pushed Jan 06, 11
- Various bits and helpers for jQuery, that might prove useful or not. :)1 watcher / Pushed Jan 23, 09
- A Collection of TextMate Themes I've gathered over the years39 forks / 296 watchers / Pushed Feb 07, 12
- Continuous Integration software written on top of Ruby on Rails 3 and DelayedJob.74 forks / 299 watchers / Pushed Feb 05, 12
- Resource-oriented architectures in Ruby. Roar focuses on object-oriented REST documents.17 forks / 282 watchers / Pushed Feb 05, 12
- Octopress is an obsessively designed framework for Jekyll blogging. It’s easy to configure and easy to deploy. Sweet huh?538 forks / 2189 watchers / Pushed Feb 05, 12
- 16 forks / 170 watchers / Pushed Jan 27, 12
- 1 fork / 1 watcher / Pushed Jan 16, 12
- Facebook OAuth2 Strategy for OmniAuth 1.013 forks / 73 watchers / Pushed Jan 05, 12
- Guard::Jessie automatically runs your jasmine specs through jessie driver4 forks / 8 watchers / Pushed Dec 18, 11
- CRUD through HTTP is a good step forward to using resources and becoming RESTful. Another step further into it is to make use of hypermedia-based services and the Restfulie gem allows you to do it very quickly.38 forks / 357 watchers / Pushed Dec 15, 11
- Conway's Game of Life implementation in Haskell3 forks / 7 watchers / Pushed Dec 05, 11
- Attache.js is a Node.js module with AOP implementation1 fork / 5 watchers / Pushed Dec 05, 11
- Simple REST client for Ruby, inspired by microframework syntax for specifying actions. Official fork is now at:168 forks / 480 watchers / Pushed Sep 19, 11
- Execute Inline Ruby, Python, Bash, Perl, PHP, Node.js (OSX system wide)5 forks / 54 watchers / Pushed Sep 06, 11
- A MacRuby application that list all host aliases in OS X Directory Services1 fork / 1 watcher / Pushed Jun 02, 11
- 65 forks / 59 watchers / Pushed May 09, 11
- JS interface to encapsulate the Audio Data API methods4 forks / 43 watchers / Pushed Apr 10, 11
- Template generator for Ruby on Rails 3 applications59 forks / 218 watchers / Pushed Mar 27, 11
- Stay updated of those who stopped following you on Twitter!2 forks / 3 watchers / Pushed Jan 06, 11
- Various bits and helpers for jQuery, that might prove useful or not. :)1 watcher / Pushed Jan 23, 09
- A Ruby interface to the Octave interpreted language3 forks / 14 watchers / Pushed Dec 30, 08
-
Posts
- Oct 31, 11
idk, but i think she was talking about the economic crisis
- Oct 31, 11UHUSHUASHAUSHAUSTirinha enviada pelo leitor Gabriel Rodolfo
- Oct 28, 11
There is just too many awesome Lorem Ipsum (placeholder) text generators going around lately not to round them up.
Cupcake Ipsum
Dragée soufflé sweet roll gummi bears. Tiramisu chocolate macaroon jelly chocolate bar jujubes icing. Faworki bear claw brownie pudding caramels chocolate. Cake chocolate chocolate. Cake bonbon lollipop caramels cheesecake pastry cotton candy. Pastry applicake oat cake donut powder croissant brownie cookie. Bear claw bonbon candy canes sweet chocolate cheesecake halvah candy canes. Ice cream gummies gummi bears sweet cookie. Halvah tootsie roll cheesecake. Ice cream ice cream candy lemon drops biscuit topping.
Fillerama
Bender, quit destroying the universe! I decline the title of Iron Cook and accept the lesser title of Zinc Saucier, which I just made up. Uhh… also, comes with double prize money. So, how 'bout them Knicks? Soon enough. Look, everyone wants to be like Germany, but do we really have the pure strength of 'will'? Goodbye, cruel world. Goodbye, cruel lamp. Goodbye, cruel velvet drapes, lined with what would appear to be some sort of cruel muslin and the cute little pom-pom curtain pull cords. Cruel though they may be…
Samuel L. Ipsum
Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.
Hipster Ipsum
Readymade sustainable sartorial vice 8-bit, letterpress ethical beard lo-fi mustache craft beer banh mi mlkshk cred. Messenger bag banksy williamsburg cliche, biodiesel butcher gentrify farm-to-table sartorial 3 wolf moon beard twee. Beard DIY thundercats whatever, locavore 3 wolf moon put a bird on it Austin helvetica. Aesthetic salvia mcsweeney's cred brunch. Banh mi scenester mlkshk, american apparel DIY put a bird on it keffiyeh lo-fi. Wayfarers sartorial food truck stumptown brooklyn, mustache keytar vice VHS single-origin coffee cliche cardigan whatever. Irony lo-fi farm-to-table, letterpress aesthetic blog craft beer organic portland hoodie Austin whatever.
Bogan Ipsum
She'll be right dero also trent from punchy jackaroo. He's got a massive cook my he hasn't got a schooner. As dry as a your shout when mad as a pig's arse. Lets throw a prezzy no dramas she'll be right stoked. Mad as a bored sh*tless with gutful of doovalacky. As busy as a apples no worries chunder.
Bacon Ipsum
Bacon ipsum dolor sit amet rump turkey short ribs corned beef ground round, tri-tip biltong pancetta pork belly chuck shoulder. Ribeye pork loin andouille, corned beef sausage drumstick beef prosciutto pork. Tenderloin turkey chicken chuck. Swine boudin corned beef pastrami tongue. Swine shankle pork belly tenderloin tri-tip rump, andouille fatback biltong venison short ribs tail ham hock. Cow chicken turducken jowl, fatback frankfurter sirloin biltong. Rump salami short ribs kielbasa venison turducken.
Bonus
Probably not great for most client work or school projects: Swearem Ipsum
My own, with HTML tags: HTML-Ipsum
For images: Placehold.it, Placekitten, Placedog, and Placebear.
Lots of Ipsum is a post from CSS-Tricks
- Oct 31, 11
Submitted by: fakemail1995
Posted at: 2011-10-30 02:23:50
See full post and comment: http://9gag.com/gag/443502 - Oct 31, 11
Submitted by: tudodepende
Posted at: 2011-10-30 02:12:54
See full post and comment: http://9gag.com/gag/443458 - Oct 31, 11
Submitted by: earthjii
Posted at: 2011-10-30 11:07:57
See full post and comment: http://9gag.com/gag/445091 - Oct 30, 11
Submitted by: yanoua
Posted at: 2011-10-29 07:42:59
See full post and comment: http://9gag.com/gag/437398 - Oct 30, 11
Ruby 1.9.3-p0 has been released. No release candidates, betas or preview releases, this is the final thing. If you've been putting off looking at the 1.9.3 branch, now is the time because it's not going to get any more "done." You can install it from source, or let RVM do its thing. Just rvm install 1.9.3 and you're done.
- Oct 30, 11
Submitted by: arrozsinho
Posted at: 2011-10-29 02:59:44
See full post and comment: http://9gag.com/gag/436601 - Oct 30, 11
Submitted by: kostaspap
Posted at: 2011-10-29 09:31:39
See full post and comment: http://9gag.com/gag/437732 - Oct 30, 11
Shared by PotHix
Muito foda!By way of Raymond Johnson, the best statistics multiple choice question ever written on a chalkboard. Try not to think too hard. [via]
- Oct 29, 11
Submitted by: kizax
Posted at: 2011-10-28 07:23:56
See full post and comment: http://9gag.com/gag/430590
-
Tweets
- Getting ready for #hackkrk
- @AninhaC_D putz!!
- @antekpiechnik you haven't seen me playing drums while coding
- brogramming at @applicake http://t.co/J6ROkSCc
- @antekpiechnik so far!
- do a barrel roll! /cc @RodzynTweet
- @mateuszzawisza thanks bro
- not sure if there's a better way to do this: git status | grep deleted: | awk '{print $3}' | xargs git rm
- @sobrinho @caironoleto é mais enterprisey lol
- @sobrinho @caironoleto :) precisava de ideias pro nome da pasta com regras de negocio. acabei chamando ela de 'domain'
- @caironoleto @sobrinho curiosidade, o que vcs tem na pasta enumerations?
- @wilhelmniznik be there in 30/40min
- @wilhelmniznik anything man, i'm at my place, chilling out
- @antekpiechnik que bosta
- any ideas on how to access the url's fragment in capybara?
- @mariuszlusiak which is good when you run `rspec .` for example
- @mariuszlusiak run **really** isolated tests. After rspec runs one file it keeps the loaded features to the next spec file
- @powczarek @karolsmazur did i hear arduino? i'm in!
- I wonder if it is possible that each rspec file runs on its own environment
-
Photos
-
Likes
-
Favorites
-
Reading
-
Checkins
- Nic Nowegoul. Sw. Krzyza
- Elias' placeSzlak 50
- AlchemiaEstery 5
- SiouxRynek Główny 22
- MultikinoDobrego Pasterza 128
- Nic Nowegoul. Sw. Krzyza
- MoaburgerMikołajska 3
- Applicake HQMarii Sklodowskiej Curie 5
- Lizard KingŚwiętego Tomasza 11
- Nic Nowegoul. Sw. Krzyza
- GlonojadPlac Jana Matejki 13
- MoaburgerMikołajska 3
- Nic Nowegoul. Sw. Krzyza
- Applicake HQMarii Sklodowskiej Curie 5
- MoaburgerMikołajska 3
- Nic Nowegoul. Sw. Krzyza
- Burger KingGaleria Krakowska, Pawia 5
- Applicake HQMarii Sklodowskiej Curie 5
- Elias' placeSzlak 50
-
Map
- Warsaw, Poland, July 2011Jul 18, 11 - Jul 19, 12
- MadridJul 06, 11 - Jul 07, 11
- EuropeJun 13, 11 - Jun 24, 11
- BerlinMay 26, 11 - May 30, 11
- LondonMay 05, 11 - May 07, 11
- BarcelonaApr 07, 11 - Apr 10, 11
- KrakówApr 01, 11 - Apr 03, 11
- ParisMar 29, 11 - Mar 31, 11
- London, United Kingdom, March 2011Mar 25, 11 - Mar 28, 11
- Liverpool / ManchesterMar 22, 11 - Mar 24, 11
-
Posts
-
Status
