Filma eu Galvão!

Escrito por Aurelio Jargas em 12/05/2010

Resumo: Quer saber como é a rotina de um programador de software? É só assistir o vídeo: https://youtu.be/0Qu5fj8K0d4

Sempre achei muito massa ver aqueles vídeos bacanas que mostram a tela do computador e o cara vai narrando o que está fazendo. Você ouve os cliques do mouse, as teclas do teclado e vê o resultado ali na tela. Parece que você está ali do lado, acompanhando tudo ao vivo. Acho essa uma das maneiras mais eficientes de se ensinar algo nerd.

Eu era afinzão de fazer um vídeo desses, mas é tanto trabalho que só de pensar já dá preguiça.

Ano passado até fiz uma tentativa tímida: um vídeo ensinando AppleScript, porém era somente vídeo, sem narração. Sabe como é, cara envergonhado fica quieto mesmo, só olhando :)

Agora, bem descansado das férias, resolvi perder a virgindade (epa!) e fazer minha primeira tentativa de um vídeo nerd com narração. Fiquei na dúvida do que exatamente gravar. Só me vinham ideias sem graça na cabeça.

Até que durante o banho deu um estalo.

Eu já estava me programando para um dia mexer no MoneyLog, pois um usuário havia mandado uma tradução e eu tinha que inclui-la no código. Seria algo rápido: colar as mensagens, testar, mandar pro SVN e pronto. (ãrran…)

Ei, eu poderia gravar tudo isso!

Pensei comigo: dará um vídeo rápido (ãrran…) e pode ser interessante para as pessoas que nunca viram como é a rotina programar. Aí na narração eu poderia dar dicas de uso das ferramentas e sistemas envolvidos no processo.

É, parece legal.

Legal para nerds, claro :)

Bem, sem muitonenhum planejamento e sem ter muito claro qual era meu objetivo com aquela gravação, resolvi fazer e ver no que dá.

Ontem foi o dia.

Abri o Snapz Pro X aqui, botei minha tela em 800×600 e depois de mais de uma hora de testes de resolução, posição do microfone e qualidade final, começou a gravação oficial.

Eu comprei o Snapz Pro X numa promoção (bundle) e ele veio com um preço irrisório, só por isso o uso. Mas não recomendo. Seu preço normal é caro demais e não tem aquelas opções bacanas de mostrar as teclas na tela, mostrar os cliques do mouse, zoom estiloso, etc. Aliás, aceito sugestões de programas legais de gravação de tela.

Gravei todo o processo, desde o início até a atualização do SVN.

Não fiz ensaio para que o vídeo fosse o mais realista possível.

Eu achei que daria só uns 5 minutos, mas aconteceram problemas, quebrei o programa e me bati um pouco para arrumar. Nada mais realista do que isso! Afinal, programar é, na maior parte do tempo, resolver problemas. O “glamour” da criação dos algoritmos perfeitos fica apenas para momentos especiais.

Como já fazia nove meses que eu não mexia no código do MoneyLog, penei para lembrar de todos os detalhes envolvidos no processo. Programar é complexo, tem que ter muita coisa na cabeça ao mesmo tempo.

Também decidi filmar de uma só vez, sem cortes e sem edição posterior, para registrar a realidade do programador. Uma música seria legal, talvez retirar algumas partes deixaria o vídeo mais animado, mas eu não queria um videoclipe, queria realidade. Programar não é uma aventura agitada, é um trabalho de concentração extrema.

Para vídeos agitados e repletos de emoção, veja o site do meu amigo e ex-chefe Rodrigo Stulzer, o transpirando.com. O Rodrigo é atleta e leva a câmera em suas aventuras, faz entrevistas enquanto corre, mostra o sofrimento do esporte com o olho de quem participa. Prepare-se para suar junto :)

A pressão de estar sendo filmado e saber que eu só teria uma chance de ir até o final, além da pressão de querer fazer tudo rápido para o vídeo não ficar muito longo, me estressaram. Cometi erros e em alguns momentos não enxerguei a resposta que estava ali na minha frente.

Bem, até que isso foi divertido :)

Com erros, brancos e indecisões, os 5 minutos previstos tornaram-se 25. Sim, vídeo longo no fim das contas. Mas são 25 minutos de realidade na rotina de um programador. Era o que eu queria. Um resumo de 3 minutos somente com as partes boas (os acertos) não seria honesto, nem passaria o clima de atenção e tensão que a programação exige.

Preparado(a)? Então, aqui está:

• Sem ensaio.
• Sem cortes.
• Sem edição.
• Praticamente um Reality Show nerd :)

Dica: Você pode assistir direto no YouTube. Acho que fica melhor, e na descrição do vídeo tem o roteiro completo com links.

Roteiro: (espere o vídeo carregar)

• 0:55 — O eterno problema das aspas. Elas SEMPRE incomodam!
• 1:40 — O terminal nunca morre.
• 2:18 — TextMate: Command-{ para mover o bloco para a esquerda.
• 2:53 — Mudando o idioma no config.js.
• 3:28 — BUG: Em catalão, não mostrou os dados nem as tags.
• 4:10 — Pescando menus nos Opera…
• 4:41 — Procurei a linha 1596 no arquivo errado, era pra ser no moneylog.js.
• 5:00 — Olha a linha 1596 ali! E eu nem vi… Acabei acertando sem querer.
• 5:34 — Chutando: coloquei o DIV novo no HTML pra ver se funciona.
• 5:55 — Não funcionou.
• 6:19 — Linha 510 – Dessa vez achei rápido o erro (msgLoading).
• 6:42 — TextMate: Command-F2 (ou clique) marca a linha. F2 pula até ela.
• 7:16 — Testando mais uma vez. Agora apareceu as tags no rodapé pelo menos.
• 7:36 — Linha 353 – Tava na cara o dateFormat e eu não vi…
• 8:06 — Fui mexer na data padrão, mas quando vi o showLocaleDate deu o clique.
• 9:05 — Testando de novo e agora funcionou! Viva!
• 9:36 — Comparando lista de nomes com expressões regulares e diff.
• 9:55 — “tudo o que vem depois do DOIS-PONTOS” (errei a fala).
• 10:18 — TextMate: ordena linhas com F5.
• 10:44 — Textmate: Control-Shift-Comand-D para comparar dois arquivos (diff).
• 11:33 — TextMate: Command-E para usar o texto na pesquisa, Command-G para buscar.
• 11:56 — Avisando no twitter sobre a gravação do vídeo.
• 12:35 — Agora vou colocar o texto de ajuda (help).
• 12:59 — SILÊNCIO. Enquanto isso, no pensamento: Droga! Não era pra apertar essa tecla, eu não queria mostrar meu Desktop no vídeo. E agora? Paro o vídeo? Depois corto e emendo? Mas tem o relógio ali em cima, vai aparecer. Droga, droga. Dane-se, agora já foi, depois eu vejo o que eu faço… Vamo lá.
• 13:20 — Trecho muuuuuuito chato editando HTML, colocando tags, um saco.
• 14:29 — TextMate: Control-Shift-W para colocar um {tag}…{/tag} em volta do texto.
• 14:40 — TextMate: Control-Shift-Command-W para colocar um {tag}…{/tag} em cada linha do texto.
• 16:55 — “Vamos ver como ficou”, mas mudei de ideia sem perceber e continuei editando :)
• 17:40 — TextMate: Option-Command-. para fechar uma tag HTML aberta.
• 18:52 — Help em catalão agora está OK.
• 19:36 — TextMate: Shift-Command-↓ move a linha para baixo e Command-Enter para quebrar a linha (sem precisar ir ao fim dela).
• 20:03 — SVN na linha de comando. Deu branco, pensa, pensa… Não lembrei do bendito -m.
• 20:13 — TextMate: Abre pasta, clica arquivo, Control-Shift-A para comandos SVN.
• 20:32 — Conferindo todas as mudanças no código (diff colorido).
• 21:18 — Outro trecho chato e demorado só porque esqueci do comando svn log… Patetando no Google pra tentar achar o endereço do SVN.
• 21:52 — CEGO! Tá ali já no 1º resultado, moneylog-dev!
• 22:47 — Galera do twitter, digam oi!
• 23:20 — Ufa! Gelei quando vi a mensagem de “read-only”. Só faltava essa no meio do vídeo :)
• 23:39 — Finalmente escrevendo a mensagem que resume as mudanças (changelog).
• 25:00 — Commit.
• 25:12 — SVN no Google Code, última atualização foi em agosto de 2009.
• 25:30 — Conferência final e resumo das mudanças (diff colorido).

Bem, eu fiz minha parte. Agora é contigo, preciso saber sua opinião!

• O que achou?
• Curtiu?
• Faltou algo?
• Tem alguma sugestão?
• Quer ver mais vídeos desse tipo?