You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
4.5 KiB
ReStructuredText
121 lines
4.5 KiB
ReStructuredText
Updating EuroLoveMap
|
|
####################
|
|
:date: 2014-03-27 14:00:00
|
|
:tags: javascript, python, heroku
|
|
|
|
As part of the `OpeNER
|
|
hackathon <http://www.opener-project.org/2013/07/18/opener-hackathon-in-amsterdam/>`__
|
|
we decided to build a prototype that would allow us to compare how
|
|
different countries feel about several topics. We used the OpeNER
|
|
pipeline to get the sentiment from a set of newspaper articles we
|
|
gathered from media in several languages. Then we aggregated those
|
|
articles by category and country (using the source of the article or the
|
|
language it was written in), obtaining the "overall feeling" of each
|
|
country about each topic. Then, we used some fancy JavaScript to make
|
|
sense out of the raw information.
|
|
|
|
It didn't go too bad, it turns out `we
|
|
won <http://eurosentiment.eu/wp-content/uploads/2013/07/BOLv9qnCIAAJEek.jpg>`__.
|
|
|
|
Now, it was time for a face-lift. I used this opportunity to play with
|
|
new technologies and improve it:
|
|
|
|
- Using Flask, this time using python 3.3 and Bootstrap 3.0
|
|
- Cool HTML5+JS cards (thanks to
|
|
`pastetophone <http://pastetophone.com>`__)
|
|
- Automatic generation of fake personal data to test the interface
|
|
- Obfuscation of personal emails
|
|
|
|
The result can be `seen here <http://eurolovemap.herokuapp.com/>`_.
|
|
|
|
|
|
Publishing a Python 3 app on Heroku
|
|
-----------------------------------
|
|
|
|
.. code-block:: bash
|
|
|
|
mkvirtualenv -p /usr/bin/python3.3 eurolovemap
|
|
|
|
Since Heroku uses python 2.7 by default, we have to tell it which
|
|
version we want, although it supports python 3.4 as well. I couldn't get
|
|
python 3.4 working using the
|
|
`deadsnakes <https://launchpad.net/~fkrull/+archive/deadsnakes>`__ ppa,
|
|
so I used python 3.3 instead, which works fine but is not officially
|
|
supported. Just create a file named *runtime.txt* in your project root,
|
|
with the python version you want to use:
|
|
|
|
.. code-block:: bash
|
|
|
|
python-3.3.1
|
|
|
|
Don't forget to freeze your dependencies so Heroku can install them:
|
|
``bash pip freze > requirements.txt``
|
|
|
|
Publishing personal emails
|
|
--------------------------
|
|
|
|
There are really sophisticated and effective ways to obfuscate personal
|
|
emails so that spammers cannot easily grab yours. However, this time I
|
|
needed something really simple to hide our emails from the simplest form
|
|
of crawlers. Most of the team are in academia somehow, so in the end all
|
|
our emails are available in sites like Google Scholar. Anyway, nobody
|
|
likes getting spammed so I settled for a custom `Caesar
|
|
cipher <http://en.wikipedia.org/wiki/Caesar_cipher>`__. Please, don't
|
|
use it for any serious application if you are concerned about being
|
|
spammed.
|
|
|
|
.. code-block:: python
|
|
|
|
def blur_email(email):
|
|
return "".join([chr(ord(i)+5) for i in email])
|
|
|
|
And this is the client side:
|
|
|
|
.. code-block:: javascript
|
|
|
|
window.onload = function(){
|
|
elems = document.getElementsByClassName('profile-email');
|
|
for(var e in elems){
|
|
var blur = elems[e].innerHTML;
|
|
var email = "";
|
|
for(var s in blur){
|
|
var a = blur.charCodeAt(s)
|
|
email = email+String.fromCharCode(a-5);
|
|
}
|
|
elems[e].innerHTML = email;
|
|
}
|
|
}
|
|
|
|
Unfortunately, this approach does not hide your email from anyone using
|
|
`PhantomJS <http://phantomjs.org/>`__,
|
|
`ZombieJS <http://zombie.labnotes.org/>`__ or similar. For that, other
|
|
approaches like generating a picture with the address would be
|
|
necessary. Nevertheless, it is overkill for a really simple ad-hoc
|
|
application with custom formatting and just a bunch of emails that would
|
|
easily be grabbed manually.
|
|
|
|
Generation of fake data
|
|
-----------------------
|
|
|
|
To test the contact section of the site, I wanted to populate it with
|
|
fake data. `Fake-Factory <https://github.com/joke2k/faker>`__ is an
|
|
amazing library that can generate fake data of almost any kind: emails,
|
|
association names, acronyms... It even lets you localise the results
|
|
(get Spanish names, for instance) and generate factories for certain
|
|
classes (à la Django).
|
|
|
|
But I also wanted pictures, enter `Lorem
|
|
Pixel <http://lorempixel.com/>`__. With its API you can generate
|
|
pictures of almost any size, for different topics (e.g. nightlife,
|
|
people) and with a custom text. You can even use an index, so it will
|
|
always show the same picture.
|
|
|
|
For instance, the picture below is served through Lorem Pixel.
|
|
|
|
.. figure:: http://lorempixel.com/400/200/nightlife/
|
|
:alt: This picture is generated with LoremIpsum
|
|
|
|
By the way, if you only want cat pictures, take a look at
|
|
`Placekitten <http://placekitten.com/>`__. And for NSFW text, there's
|
|
the `Samuel L. Jackson Ipsum <http://slipsum.com/>`__
|