2015-01-22 22:05:35 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" >
2016-02-03 18:23:38 +00:00
< title > balkian.com - Updating EuroLoveMap
< / title >
2015-01-22 22:05:35 +00:00
< meta name = "viewport" content = "width=device-width" >
<!-- syntax highlighting CSS -->
2015-01-22 23:22:30 +00:00
< link rel = "stylesheet" href = "/theme/css/solarized.css" >
2015-01-22 22:05:35 +00:00
<!-- <link href="/css/bootstrap.css" rel="stylesheet"> -->
< link rel = "stylesheet" href = "/theme/font-awesome/css/font-awesome.min.css" >
<!-- <link rel="stylesheet" href="/css/bootstrap - responsive.min.css"> -->
<!-- Custom CSS -->
< link rel = "stylesheet" media = "only screen" href = "/theme/css/main.css" >
< link href = 'http://fonts.googleapis.com/css?family=Open+Sans:300|Comfortaa' rel = 'stylesheet' type = 'text/css' >
< / head >
< body >
< div id = "container" class = "container" >
2019-01-08 17:22:33 +00:00
< div id = "contentwrapper" >
< div id = "content" >
2015-01-22 22:05:35 +00:00
< header id = "header" >
2019-01-08 17:22:33 +00:00
< ul class = "navbar" id = "navbar" >
< a href = "/" >
< li >
< i class = "fa fa-home fa-large" > < / i >
< / li > < / a >
< a href = "/category/cheats.html" > < li >
Cheats
< / li > < / a >
< a href = "/category/misc.html" > < li class = "active"
2016-02-03 17:56:30 +00:00
>
2019-01-08 17:22:33 +00:00
Misc
< / li > < / a >
< a href = "/tags.html" > < li >
Tags
< / li > < / a >
< a href = "/pages/projects.html" > < li >
Projects
< / li > < / a >
< a href = "//jfernando.es" target = "_blank" > < li >
CV
< / li > < / a >
< / ul >
2015-01-22 22:05:35 +00:00
< / header >
<!-- Body content -->
< div class = "postnav" >
2015-12-08 16:13:36 +00:00
< span class = "previouspost" > < i class = "fa fa-chevron-left" > < / i > < a href = "remove-git-files-with-globbing.html" > Remove git files with globbing< / a > < / span >
< span class = 'nextpost' > < a href = "/publishing-on-pypi.html" > Publishing on PyPi< / a > < i class = "fa fa-chevron-right" > < / i > < / span >
2015-01-22 22:05:35 +00:00
< / div >
< div class = "posthead" >
< h2 class = "title" > Updating EuroLoveMap< / h2 >
< span class = "meta date" > 2014-03-27< / span >
2015-12-10 14:44:33 +00:00
< span class = "tag" > < a href = "/tag/javascript.html" class = "label label-default" > javascript< / a > < / span >
< span class = "tag" > < a href = "/tag/python.html" class = "label label-default" > python< / a > < / span >
< span class = "tag" > < a href = "/tag/heroku.html" class = "label label-default" > heroku< / a > < / span >
2015-01-22 22:05:35 +00:00
< / div >
< div class = "post" >
< p > As part of the < a class = "reference external" href = "http://www.opener-project.org/2013/07/18/opener-hackathon-in-amsterdam/" > OpeNER
hackathon< / a >
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.< / p >
< p > It didn't go too bad, it turns out < a class = "reference external" href = "http://eurosentiment.eu/wp-content/uploads/2013/07/BOLv9qnCIAAJEek.jpg" > we
won< / a > .< / p >
< p > Now, it was time for a face-lift. I used this opportunity to play with
new technologies and improve it:< / p >
< ul class = "simple" >
< li > Using Flask, this time using python 3.3 and Bootstrap 3.0< / li >
< li > Cool HTML5+JS cards (thanks to
< a class = "reference external" href = "http://pastetophone.com" > pastetophone< / a > )< / li >
< li > Automatic generation of fake personal data to test the interface< / li >
< li > Obfuscation of personal emails< / li >
< / ul >
2015-12-08 00:39:33 +00:00
< p > The result can be < a class = "reference external" href = "http://eurolovemap.herokuapp.com/" > seen here< / a > .< / p >
2015-01-22 22:05:35 +00:00
< div class = "section" id = "publishing-a-python-3-app-on-heroku" >
< h2 > Publishing a Python 3 app on Heroku< / h2 >
2016-09-28 18:27:26 +00:00
< table class = "highlighttable" > < tr > < td class = "linenos" > < div class = "linenodiv" > < pre > 1< / pre > < / div > < / td > < td class = "code" > < div class = "highlight" > < pre > < span > < / span > mkvirtualenv -p /usr/bin/python3.3 eurolovemap
2015-01-22 22:05:35 +00:00
< / pre > < / div >
< / td > < / tr > < / table > < p > 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
< a class = "reference external" href = "https://launchpad.net/~fkrull/+archive/deadsnakes" > deadsnakes< / a > ppa,
so I used python 3.3 instead, which works fine but is not officially
supported. Just create a file named < em > runtime.txt< / em > in your project root,
with the python version you want to use:< / p >
2016-09-28 18:27:26 +00:00
< table class = "highlighttable" > < tr > < td class = "linenos" > < div class = "linenodiv" > < pre > 1< / pre > < / div > < / td > < td class = "code" > < div class = "highlight" > < pre > < span > < / span > python-3.3.1
2015-01-22 22:05:35 +00:00
< / pre > < / div >
< / td > < / tr > < / table > < p > Don't forget to freeze your dependencies so Heroku can install them:
< tt class = "docutils literal" > bash pip freze > requirements.txt< / tt > < / p >
< / div >
< div class = "section" id = "publishing-personal-emails" >
< h2 > Publishing personal emails< / h2 >
< p > 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 < a class = "reference external" href = "http://en.wikipedia.org/wiki/Caesar_cipher" > Caesar
cipher< / a > . Please, don't
use it for any serious application if you are concerned about being
spammed.< / p >
< table class = "highlighttable" > < tr > < td class = "linenos" > < div class = "linenodiv" > < pre > 1
2016-09-28 18:27:26 +00:00
2< / pre > < / div > < / td > < td class = "code" > < div class = "highlight" > < pre > < span > < / span > < span class = "k" > def< / span > < span class = "nf" > blur_email< / span > < span class = "p" > (< / span > < span class = "n" > email< / span > < span class = "p" > ):< / span >
2016-02-03 17:56:30 +00:00
< span class = "k" > return< / span > < span class = "s2" > " " < / span > < span class = "o" > .< / span > < span class = "n" > join< / span > < span class = "p" > ([< / span > < span class = "nb" > chr< / span > < span class = "p" > (< / span > < span class = "nb" > ord< / span > < span class = "p" > (< / span > < span class = "n" > i< / span > < span class = "p" > )< / span > < span class = "o" > +< / span > < span class = "mi" > 5< / span > < span class = "p" > )< / span > < span class = "k" > for< / span > < span class = "n" > i< / span > < span class = "ow" > in< / span > < span class = "n" > email< / span > < span class = "p" > ])< / span >
2015-01-22 22:05:35 +00:00
< / pre > < / div >
< / td > < / tr > < / table > < p > And this is the client side:< / p >
< table class = "highlighttable" > < tr > < td class = "linenos" > < div class = "linenodiv" > < pre > 1
2
3
4
5
6
7
8
9
10
11
2016-09-28 18:27:26 +00:00
12< / pre > < / div > < / td > < td class = "code" > < div class = "highlight" > < pre > < span > < / span > < span class = "nb" > window< / span > < span class = "p" > .< / span > < span class = "nx" > onload< / span > < span class = "o" > =< / span > < span class = "kd" > function< / span > < span class = "p" > (){< / span >
2015-01-22 22:05:35 +00:00
< span class = "nx" > elems< / span > < span class = "o" > =< / span > < span class = "nb" > document< / span > < span class = "p" > .< / span > < span class = "nx" > getElementsByClassName< / span > < span class = "p" > (< / span > < span class = "s1" > ' profile-email' < / span > < span class = "p" > );< / span >
< span class = "k" > for< / span > < span class = "p" > (< / span > < span class = "kd" > var< / span > < span class = "nx" > e< / span > < span class = "k" > in< / span > < span class = "nx" > elems< / span > < span class = "p" > ){< / span >
< span class = "kd" > var< / span > < span class = "nx" > blur< / span > < span class = "o" > =< / span > < span class = "nx" > elems< / span > < span class = "p" > [< / span > < span class = "nx" > e< / span > < span class = "p" > ].< / span > < span class = "nx" > innerHTML< / span > < span class = "p" > ;< / span >
< span class = "kd" > var< / span > < span class = "nx" > email< / span > < span class = "o" > =< / span > < span class = "s2" > " " < / span > < span class = "p" > ;< / span >
< span class = "k" > for< / span > < span class = "p" > (< / span > < span class = "kd" > var< / span > < span class = "nx" > s< / span > < span class = "k" > in< / span > < span class = "nx" > blur< / span > < span class = "p" > ){< / span >
< span class = "kd" > var< / span > < span class = "nx" > a< / span > < span class = "o" > =< / span > < span class = "nx" > blur< / span > < span class = "p" > .< / span > < span class = "nx" > charCodeAt< / span > < span class = "p" > (< / span > < span class = "nx" > s< / span > < span class = "p" > )< / span >
< span class = "nx" > email< / span > < span class = "o" > =< / span > < span class = "nx" > email< / span > < span class = "o" > +< / span > < span class = "nb" > String< / span > < span class = "p" > .< / span > < span class = "nx" > fromCharCode< / span > < span class = "p" > (< / span > < span class = "nx" > a< / span > < span class = "o" > -< / span > < span class = "mi" > 5< / span > < span class = "p" > );< / span >
< span class = "p" > }< / span >
< span class = "nx" > elems< / span > < span class = "p" > [< / span > < span class = "nx" > e< / span > < span class = "p" > ].< / span > < span class = "nx" > innerHTML< / span > < span class = "o" > =< / span > < span class = "nx" > email< / span > < span class = "p" > ;< / span >
< span class = "p" > }< / span >
< span class = "p" > }< / span >
< / pre > < / div >
< / td > < / tr > < / table > < p > Unfortunately, this approach does not hide your email from anyone using
< a class = "reference external" href = "http://phantomjs.org/" > PhantomJS< / a > ,
< a class = "reference external" href = "http://zombie.labnotes.org/" > ZombieJS< / a > 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.< / p >
< / div >
< div class = "section" id = "generation-of-fake-data" >
< h2 > Generation of fake data< / h2 >
< p > To test the contact section of the site, I wanted to populate it with
fake data. < a class = "reference external" href = "https://github.com/joke2k/faker" > Fake-Factory< / a > 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).< / p >
< p > But I also wanted pictures, enter < a class = "reference external" href = "http://lorempixel.com/" > Lorem
Pixel< / a > . 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.< / p >
< p > For instance, the picture below is served through Lorem Pixel.< / p >
< div class = "figure" >
< img alt = "This picture is generated with LoremIpsum" src = "http://lorempixel.com/400/200/nightlife/" / >
< / div >
< p > By the way, if you only want cat pictures, take a look at
< a class = "reference external" href = "http://placekitten.com/" > Placekitten< / a > . And for NSFW text, there's
the < a class = "reference external" href = "http://slipsum.com/" > Samuel L. Jackson Ipsum< / a > < / p >
< / div >
< / div >
< / div >
2019-01-08 17:22:33 +00:00
< div id = "sidebar" >
< div id = "badge" class = "flip-container" ontouchstart = "this.classList.toggle('hover');" >
< div class = "flipper sticky" >
< div class = "front" >
<!-- front content -->
< img id = "avatar" src = "/theme/img/me.png" >
< / div >
< div class = "back" >
<!-- back content -->
< img id = "picture" src = "/theme/img/me-bat.png" >
< / div >
< / div >
< / div >
< div class = "entries" >
< h2 class = "title" > Latest entries< / h2 >
< dl >
< dt > < a href = "/controlling-zigbee-devices-with-mqtt.html" > Controlling Zigbee devices with MQTT< / a > < / dt >
< dd class = "tag" > < a class = "label" href = "/tag/mqtt.html" > mqtt< / a > < / dd >
< dd class = "tag" > < a class = "label" href = "/tag/iot.html" > iot< / a > < / dd >
< dd class = "tag" > < a class = "label" href = "/tag/zigbee.html" > zigbee< / a > < / dd >
< dt > < a href = "/hdmi-vga-adapter-issues-with-raspberry-pi.html" > HDMI-VGA adapter issues with Raspberry Pi< / a > < / dt >
< dd class = "tag" > < a class = "label" href = "/tag/rpi.html" > rpi< / a > < / dd >
< dt > < a href = "/pptp-connections.html" > PPTP connections< / a > < / dt >
< dd class = "tag" > < a class = "label" href = "/tag/openwrt.html" > openwrt< / a > < / dd >
< dd class = "tag" > < a class = "label" href = "/tag/linux.html" > linux< / a > < / dd >
< dd class = "tag" > < a class = "label" href = "/tag/router.html" > router< / a > < / dd >
< dt > < a href = "/progress-bars-in-python.html" > Progress bars in python< / a > < / dt >
< dd class = "tag" > < a class = "label" href = "/tag/python.html" > python< / a > < / dd >
< dt > < a href = "/arch-linux-fixes.html" > Arch Linux Fixes< / a > < / dt >
< dd class = "tag" > < a class = "label" href = "/tag/arch.html" > arch< / a > < / dd >
< dd class = "tag" > < a class = "label" href = "/tag/linux.html" > linux< / a > < / dd >
< / dl >
< / div >
< div class = "about" style = "clear:both;" >
<!-- <h2 class="title">About me</h2> -->
< div class = "icons" >
< span class = "coolicon" > < span class = "fa fa-stack" > < i class = "fa fa-square-o fa-stack-2x" > < / i > < i class = "fa fa-stack-1x fa-linux" > < / i > < / span > < span class = "explanation" > Linux lover< / span > < / span >
< span class = "coolicon" > < span class = "fa fa-stack" > < i class = "fa fa-square-o fa fa-stack-2x" > < / i > < i class = "fa fa-android" > < / i > < / span > < span class = "explanation" > Android dev< / span > < / span >
< span class = "coolicon" > < span class = "fa fa-stack" > < i class = "fa fa-square-o fa fa-stack-2x" > < / i > < i class = "fa fa-github-alt" > < / i > < / span > < span class = "explanation" > GitHub user< / span > < / span >
< span class = "coolicon" > < span class = "fa fa-stack" > < i class = "fa fa-square-o fa fa-stack-2x" > < / i > < i class = "fa fa-stack-exchange" > < / i > < / span > < span class = "explanation" > StackExchange fan< / span > < / span >
< span class = "coolicon" > < span class = "fa fa-stack" > < i class = "fa fa-square-o fa fa-stack-2x" > < / i > < i class = "fa fa-music" > < / i > < / span > < span class = "explanation" > Music lover< / span > < / span >
< span class = "coolicon" > < span class = "fa fa-stack" > < i class = "fa fa-square-o fa fa-stack-2x" > < / i > < i class = "fa fa-film" > < / i > < / span > < span class = "explanation" > Movie fan< / span > < / span >
< span class = "coolicon" > < span class = "fa fa-stack" > < i class = "fa fa-square-o fa fa-stack-2x" > < / i > < i class = "fa fa-comments" > < / i > < / span > < span class = "explanation" > Always on IM< / span > < / span >
< span class = "coolicon" > < span class = "fa fa-stack" > < i class = "fa fa-square-o fa fa-stack-2x" > < / i > < i class = "fa fa-laptop" > < / i > < / span > < span class = "explanation" > Always on a PC< / span > < / span >
< span class = "coolicon" > < span class = "fa fa-stack" > < i class = "fa fa-square-o fa fa-stack-2x" > < / i > < i class = "fa fa-pencil" > < / i > < / span > < span class = "explanation" > Occassional writter< / span > < / span >
< span class = "coolicon" > < span class = "fa fa-stack" > < i class = "fa fa-square-o fa fa-stack-2x" > < / i > < i class = "fa fa-moon-o" > < / i > < / span > < span class = "explanation" > Night owl< / span > < / span >
< span class = "coolicon" > < span class = "fa fa-stack" > < i class = "fa fa-square-o fa fa-stack-2x" > < / i > < i class = "fa fa-terminal" > < / i > < / span > < span class = "explanation" > CLI user< / span > < / span >
< span class = "coolicon" > < span class = "fa fa-stack" > < i class = "fa fa-square-o fa fa-stack-2x" > < / i > < i class = "fa fa-flag" > < / i > < / span > < span class = "explanation" > Linguist wannabe< / span > < / span >
< span class = "coolicon" > < span class = "fa fa-stack" > < i class = "fa fa-square-o fa fa-stack-2x" > < / i > < i class = "fa fa-code" > < / i > < / span > < span class = "explanation" > Love to code< / span > < / span >
< span class = "coolicon" > < span class = "fa fa-stack" > < i class = "fa fa-square-o fa fa-stack-2x" > < / i > < i class = "fa fa-book" > < / i > < / span > < span class = "explanation" > Keen reader< / span > < / span >
< span class = "coolicon" > < span class = "fa fa-stack" > < i class = "fa fa-square-o fa fa-stack-2x" > < / i > < i class = "fa fa-quote-right" > < / i > < / span > < span class = "explanation" > Quotes on demand< / span > < / span >
< / div >
< / div >
<!-- Sidebar content -->
< / div > < div class = "clear" > < / div >
2015-01-22 22:05:35 +00:00
< / div >
< footer role = "contentinfo" >
< div class = "contact" >
< p >
J. Fernando Sánchez Rada | balkian
< / p >
< / div >
< ul id = "social" >
2015-12-08 16:13:36 +00:00
< li > < a href = "http://github.com/balkian" > < i class = "fa fa-github" > < / i > < / a > < / li >
< li > < a href = "http://bitbucket.com/balkian" > < i class = "fa fa-bitbucket" > < / i > < / a > < / li >
< li > < a href = "http://twitter.com/balkian" > < i class = "fa fa-twitter" > < / i > < / a > < / li >
< li > < a href = "https://plus.google.com/u/0/111897020957944410316" > < i class = "fa fa-google-plus" > < / i > < / a > < / li >
< li > < a href = "http://linkedin.com/in/jfsanchezrada" > < i class = "fa fa-linkedin" > < / i > < / a > < / li >
< li > < a href = "http://facebook.com/balkian" > < i class = "fa fa-facebook" > < / i > < / a > < / li >
2015-01-22 22:05:35 +00:00
< / ul >
< p >
2015-12-10 14:44:33 +00:00
< i class = "fa fa-creative-commons" > < / i > Creative Commons A-SA-NC
2015-01-22 22:05:35 +00:00
< / p >
< / footer >
< / div >
< script src = "/theme/js/jquery-2.0.2.min.js" > < / script >
2015-12-08 13:57:44 +00:00
<!-- Piwik -->
< script type = "text/javascript" >
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//piwik.sinpapel.es/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 2]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
< / script >
< noscript > < p > < img src = "//piwik.sinpapel.es/piwik.php?idsite=2" style = "border:0;" alt = "" / > < / p > < / noscript >
<!-- End Piwik Code -->
2015-01-22 22:05:35 +00:00
<!-- <script src="/js/bootstrap.min.js"></script> -->
< / body >
< / html >
