How to make LibreJS like you

librejs

GNU LibreJS is a browser plugin that aims to address the JavaScript problem described in Richard Stallman’s article The JavaScript Trap.

LibreJS thus blocks the execution of any javascript files that aren’t licensed as free software.

A while ago, Richard Stallman contacted me and asked me if I could try and make freedomsponsors.org compatible with LibreJS. At the time I was really busy and couldn’t do it. But recently I made another attempt and succeeded.

Making your website compatible with LibreJS is hard-ish, I’ll summarize below a few tips that worked for me.
If you need libreJS to like your site too, I think these tips will be very helpful, specially if your website uses AngularJS or AJAX.

Before we get down to it, here’s a few pointers that may be useful:

Now, the tips

1) The easiest way to make your .js files recognized as free software is to use the web labels method.

  • Every page on your website should have a link to that page, with rel=”jslicense”
    Example: on https://freedomsponsors.org you’ll find this link:

<a href=”/jslic” rel=”jslicense”>JavaScript license information</a>

  • The “Javascript license information” should have a 3 column table that lists all .js files used in your website
    • column 1: A link to the .js file, with the same path used in the <script src=”…”> tags
    • column 2: A link to the free software license this file is released on. This link should be one of the ones listed under the Free Licenses Detection section of the documentation
    • column 3: A link to the original source code for that file.

2) You need to restart firefox everytime

When you’re testing your website using firefox with LibreJS enabled, you’d think it would go somehow like this:

  • Change something in the backend
  • Refresh the browser and see if it works
  • Start again

It took me a while before I realized this doesn’t work. You have to restart firefox for LibreJS to behave consistently, thus:

  • Change something in the backend
  • Close firefox
  • Open firefox, go the page and see if it works
  • Start again

3) LibreJS may change the contents of AJAX responses.

Whenever the browser gets any http(s) response with content-type == ‘text/html’, LibreJS might change its contents adding a header and a footer. This email thread explains that in more detail (look at the screenshots attached on the first email)

So, beware of that.

4) If you’re using AngularJS, then you need to use $templateCache

Because of (#3), you can’t let AngularJS load html templates dynamically – LibreJS will change them and break your website.
You need to cache those templates in a .js file using the $templateCache Angular service.

FreedomSponsors does this using Grunt.
All templates are concatenated along with other javascript files into fs.js (the html templates are at the bottom)

5) You need to use the correct content type for json responses

Chances are that your client-side code makes AJAX calls that return json responses.
You should set content-type == ‘application/json’ for those responses. If you leave the default of “text/html”, LibreJS will change them and break your site

6) You need to escape special characters properly.

For example:
* No: «
* Yes: &laquo;

Otherwise they won’t be displayed correctly when LibreJS is enabled

7) The guys at the help-librejs mailing list are very helpful

Sign up for that mail list and ask for help whenever you need it.
The guys there are great people and are willing to help.

Well, those are the tips I had to share.

Did it help you? Or perhaps you have more hot tips? Please let me know in the comments below.

Conclusion

Overall, making my website compliant with LibreJS was sometimes frustrating and annoying.
It felt harder than it should’ve been, with more hidden obstacles than I anticipated (and I’ll bug them more about this soon at help-librejs!)
But looking in retrospect, there are a few hidden prizes too

  • Concatenating all my js and template files made pages load faster
  • Using the right content-type for json responses is always a good thing
  • Forcing yourself to know exactly what third party libs and licenses you’re using is a good thing

Free Software ftw! 🙂

Anúncios

Vixe!! Javascript tem getters e setters!

Outro dia “descobri” por acaso uma feature nova da linguagem.
Só eu que não sabia que javascript tinha uma sintaxe especial pra getters e setters?

Veja só, abre um console aí e digita o seguinte:

 o = {a:1}; //nada de mais
 o = {a:1, get x(){return this.a++;}}; //cuma???
 o.x
 o.x
 o.x
 o.a; //só eu que não sabia disso???

Interessante né.

A princípio eu pensei: “legal, mas não consigo pensar em muitas aplicações práticas pra isso.”

Até que bateu a idéia de fazer um binding AngularJS (usando ng-model) com uma property baseada em getter e setter. Como prova de conceito, imagina um controle de paginação, com um botão “ANTERIOR”, um input com o numero da página, e um botão “PRÓXIMO”. Veja como fica simples:

http://tonylampada.github.io/randomstuff/getters_n_setters.html

Não é o tipo de coisa que se usa todo dia, mas é bom saber 🙂

Async Manifesto – Será que o Agile está ultrapassado?

Outro dia meu amigo Edmundo mandou na lista dos desenvolvedores do QMágico:

http://asyncmanifesto.org/
Será que o Agile Manifesto já está ultrapassado?
Nós já seguimos muita coisa que esse manifesto está propondo.
O que acham?

Dei uma lida no manifesto, e isso me fez dar umas filosofadas a respeito.
Resolvi compartilhar minha resposta aqui no blog 🙂

Concorda? Discorda? Mete a caneta nos comentários aí 🙂

————————————————————————–

Bem legal. A idéia de diminuir a quantidade de reuniões é sempre bem vinda, principalmente entre nós programadores né 🙂

Mas, tua pergunta me fez dar umas filosofadas, que acho legal comptilhar.

Será que o Agile Manifesto já está ultrapassado?

Vamos ver:

Agile:

1. Individuals and interactions over processes and tools
2. Working software over comprehensive documentation
3. Customer collaboration over contract negotiation
4. Responding to change over following a plan

Async:

1. Modern tools and flexible work environments over meetings and office hours
2. Flexibility in prioritization over detailed planning
3. Comprehensive documentation over tribal knowledge

À primeira vista parece que o Async é mais um complemento do que um substituto pro Agile.
Por exemplo, olhando Agile2 + Async3, temos:

Working software > comprehensive documentation > tribal knowledge.

Só que não.

Lendo com mais calma o Async, vc nota que o “comprehensive documentation” se refere a coisas diferentes nos dois manifestos! – No meu entendimento pelo menos:

No Agile, ele fala de documentação que vc entrega pro cliente. Que eu concordo que é realmente uma parada secundária.
No Async, ele se refere a documentação que a gente consome internamente (como a nossa página de componentes!!), que estamos começando a perceber que tem um valor enorme!

Mas beleza, até aí nenhum conflito tb.

Mas quando vc olha pra Agile1 x Async1, eles parecem opostos, conflitantes, sim:

Agile1: people+interactions (=meetings?) > tools
Async1: tools > meetings

Né?

Eu já tinha pensado um pouco sobre isso pra falar a verdade…
Cada vez mais eu acho que processos e ferramentas são importantes demais – e o jeito que o Agile fala deles não parece fazer justiça ao tamanho dessa importância. Então nesse ponto, o Async1 me parece ser mesmo uma correção válida em cima Agile, sim.

Duas coisas que eu tentaria falar diferente no Async:

1) Acho que não tem nada a ver falar que o Scrum é uma encarnação do Agile. Apesar dessa ser uma interpretação comum da nossa indústria.
Na real, uma cultura ágil tem muito mais a ver com ENGENHARIA (TDD, Refactoring, Refactoring, já falei Refactoring?, Integração contínua, Deploy contínuo, etc) do que com GESTÃO (Scrum, Daily meetings, etc).
Quem acha que é ágil pq usa Scrum, tá fazendo isso errado.

2) É perigoso dizer “Document everything”!
Não. Tudo não, po! É pra documentar só o que precisa.
Acontece que o que precisa é bem mais do que o normalmente se documenta.
Mas isso é muito menos que “tudo”.
Isso dá margem pra que gerentes sem noção demandem um monte de documentação inútil.

[ ]’s!

Javascript for grown-ups #1: Sat, Mar-01, 02:10PM GMT-3

Earlier today I hosted a training session on basic javascript.
It happened via “Hangouts on Air”, which is a Google Hangout that is also transmitted live on Youtube.
We also had a IRC chat room where participants could send questions.
There were people from different locations: Poland, Philippines, India, Romenia, Venezuela, Taiwan, France, Brazil, and maybe more (not all participants were in the chat room)

Thanks for watching everyone! It was fun 🙂

We talked about:

* Introduction [13:36]
* Who am I [21:00]
* A word about FreedomSponsors (help me out and tell everyone about it!) [22:25]]
* About the language [26:39]
* Variables [30:50]
* Arrays and objects [44:16]
* Wat? [56:10]
* JSON [1:04:07]
* Functions [1:14:13]
* Asynchronous programming [1:24:47]
* Closures [1:37:51]
* Prototypes [2:06:12]
* This [2:31:08]

You missed it??? No problem, it’s been recorded 🙂

The “slides” I used are available on Github:
https://github.com/tonylampada/js4grownups

If you watched it, I would love to get your feedback – please let me know what you liked about it, and what I should do better for future audiences.

Thanks!
Tony Lâmpada

Bora aprender a programar?

programming_php

Muita gente quer aprender a programar e não sabe por onde começar.
Se este é o seu caso, este post é pra vc.

Programar é muito divertido, se vc começar, é bem possível que vc se apaixone pela coisa e isso mude sua vida.

Basicamente eu decidi juntar um conjunto de links que vão te ajudar a começar (no final).

Existe um curso online no Coursera [1] de introdução a programação interativa com Python [2].
O único problema é que o curso é em inglês – aliás o inglês é uma das primeiras barreiras que os iniciantes encontram.

Mesmo assim, eu sugiro que vc se inscreva no curso, só pra ter acesso aos exercícios que eles vão passar, que são muito legais.
O pessoal que criou esse curso, fez também uma plataforma *online* pra vc “brincar” de programação – que é o codeskulptor [3].

Nesse site, vc pode digitar comandos em Python e rodar dentro do próprio navegador.
O que torna o codeskulptor mais divertido é que dá pra vc construir joguinhos que ficam salvos na nuvem, e vc pode mandar o link pros seus amigos jogarem o jogo que vc fez.

E ó: Se vc fizer algum programinha legal, manda o link pra gente aí nos comentários!!! 🙂

Python é uma linguagem de programação fácil, ideal pra iniciantes, e muito poderosa – empresas fodonas, como o Google, a Disney, a Globo.com, a Petrobrás, etc, usam Python pra resolver os mais variados tipos de problemas.

Eu fiz um videozinho [4] no Youtube – baseado no codeskulptor – com a intenção de inspirar novos programadores.
A intenção é que vc veja o vídeo e vá brincar um pouquinho no codeskulptor.
Não é o melhor vídeo que eu já fiz, mas dá pro gasto, eu acho 🙂

Agora, pra aprender Python direito, desde o começo, num ritmo ideal pra quem ainda não manja nada, vc vai querer ver os vídeos do professor Masanori [5] – que compõem o curso Python para Zumbis [6]. São 1 zilhão de vídeos com menos de 10 minutos cada – onde vc aprende uma coisa nova com cada vídeo. Recomendadíssimo – provavelmente o link mais valioso nesse post! 🙂

Aí, depois que vc tiver se transformado num programador iniciante, ou seja:
– Vc entende lógica de programação
– Vc consegue traduzir essa lógica em alguma linguagem de programação
– Vc se diverte ã beça com isso

Aí tem muitos caminhos diferentes que vc pode escolher, muitas áreas diferentes pra vc se aprofundar: sistemas web, aplicativos mobile, jogos, sistemas embarcados, vixe… aplicação pra esse tipo de conhecimento é o que não falta! E empresas precisando de programadores também não! Por isso vou deixar mais alguns links adicionais aí embaixo.

[0] – Este post – Volte aqui de vez em quando pra ver se tem algum link novo! 🙂

[1] – Coursera – uma plataforma LOTADA de cursos GRATUITOS e de alto nível sobre vários assuntos (não apenas sobre computação)

[2] – An Introduction to Interactive Programming in Python – curso gratuito (em ingês)

[3] – Codeskulptor – um site pra vc brincar de programar em Python, construir joguinhos e compartilhar com seus amigos

[4] – Bora Aprender a programar? – Videozinho demonstrando o uso do Codeskulptor (assiste em tela cheia, e bota a qualidade no máximo)

[4.1] – Exemplo de um Letreiro, implementado no codeskulptor.

[5] – Professor Masanori – Um professor de São José dos Campos apaixonado por Python. Segue ele no Facebook!

[6] – Python para Zumbis – Excelente curso de Python para iniciantes.

[7] – Treinamento de AngularJS – Um treinamento sobre o framework do Google pra programação front-end de aplicações web.

[8] – Aprenda a programar – Uma apostila de Python pra iniciantes, feitas pelo Guru brasileiro do Python – o Luciano Ramalho

[9] – Django – O principal framework Python pra desenvolvimento de aplicações web (site oficial)

[10] – Welcome to the Django – Um excelente curso online (pago) que vai te dar uma injeção na veia de Python e Django

[11] – Aprenda Inglês em 30 dias – Uma apostila de inglês básico, com arquivos mp3 pra vc praticar.

[12] – Appengine: você programa e o Google escala – Um tutorial sobre como usar a plataforma de cloud do Google pra hospedar suas aplicações web em Python

Tem algum link legal pra botar nessa lista? Comenta aí embaixo!!
Mete bronca e vamo que vamo!

[ ]’s!
Lâmpada

AngularJS: fácil, rápido e em português.

Pra preparar a galera pro Hackathon que vai rolar próximo dia 19/10, o QMágico está dando treinamentos das diversas tecnologias web que a gente usa por aqui.

O treinamento de AngularJS ficou sob minha responsabilidade.

Modéstia parte, ficou do… balacubaco! 🙂

É só assistir os vídeos no Youtube, e acompanhar o código no Github (ou vc pode acessar os exemplos direto).
Fala sério, muita moleza né :-).

Espero que gostem!

[ ]’s!
Lâmpada

Jeito eficiente de gravar seu desktop no Linux

 

Esta semana, eu e mais uma galera aqui no QMágico vamos dar alguns treinamentos sobre várias tecnologias: Python, Appengine, Javascript. AngularJS, etc.

Decidimos gravar os treinamentos pra reutilizar depois. Também iremos disponibilizá-los no Youtube pra quem quiser.

Por isso gastei um tempinho pesquisando ferramentas de gravação de desktop + audio do microfone. Resolvi compartilhar aqui a melhor opção que encontrei, depois de pesquisar algumas.

É o ffmpeg. Pois é, depois de testar um monte, a que deu melhor resultado foi uma ferramenta de linha de comando.

Então pega o bizu aí: instale assim:

sudo apt-get install ffmpeg

Depois crie um arquivo executável grava.sh:

ledate=$(date +"%Y%m%d-%H%M%S")
ffmpeg -f x11grab -s 1024x768 -r 25 -i :0.0 -acodec pcm_s16le -sameq -f alsa -ac 2 -i pulse ~/desktop_$ledate.mkv

Pronto. Pra começar a gravar é só rodar esse cara no terminal (ele cria um arquivo no seu ~).

Pra parar de gravar é só apertar ctrl+c.

Dica: Normalmente o microfone embutido dos laptops são ruins e o áudio fica uma bela porcaria. Vale a pena comprar um microfone melhorzinho. Não adianta nada gastar um tempão construindo um material que vai ter uma qualidade mais ou menos depois né?

Tamanho do arquivo resultante: 19s = 18Mb. Ou seja, mais ou menos 1mb/s.

Aí vc sabe: existem dois tipos de pessoas:
a) As que conseguem extrapolar informações a partir de dados incompletos; e
b)

Então 1h de vídeo deve ficar com ~3.5Gb.

Pra subir isso pro youtube vc provavelmente vai precisar converter pra um formato mais leve.
Deve dar pra fazer isso com o ffmpeg tb!
Quando eu descobrir, eu volto aqui e atualizo o post. (Ou vc pode me ajudar e deixar as instruções nos comentários abaixo! :-))

[ ]’s