Computer Science and visually impaired people

One day, they tell you that you have cancer. Your life changes. Then, while fighting against it, you go blind. In just 24 hours you can’t see almost anything. However, that’s not stopping you to reach your dreams. This is the story of my friend Rafael Cantos, and in this article he tells us how he, a person with a huge visual impairment, manages to code. Because he, a person that managed to have a title in Computer Sciences, and a masters in the same field, even dealing with a huge visual impairment, is discovering how the real challenge lays in overcoming prejudices.

The article linked in this post is written in Spanish, but Google Translator can help you with that.

MEAN.JS 0.4.2 + Leaflet

MEAN.JS is one of the “Open-Source Full-Stack solutions” for developing MEAN applications freely available. There’s other equally acceptable solutions out there, each of them with their particularities.

MEAN applications are those that integrates MongoDB, ExpressJS, AngularJS and Node.js, and it’s a configuration that it’s being used more and more frequently in the last years. There are many options available, sometimes with very similar names ( from Linnovate, and MEAN.JS as a community-governed project from the same creator: Amos Haviv) or technologies still in development (Angular2 is used in some generators even when it’s still in beta at the moment of writing this article). The speed in which a stack solution, generator, framework, or any other starting point for MEAN development, is released and became outdated is astonishing fast. Sometimes, even updates implies a new approach that requires the change of the structure of the code. This makes very confusing for any coder willing to start learning with the tools available.

Leaflet is an “Open-Source JavaScript library for mobile-friendly interactive maps”. It’s very powerful and easy to use, and with the addition of Stamen we can make eye-candy maps very easily.

So, getting to the point. What’s the easiest way to integrate MEAN.JS and Leaflet? In around 5 minutes, and with a little help of copy-paste, we can have a working example.

Installing MEAN.JS

You will require a working installation of node.js.  That’s out of the scope in this article, but in treehouse is easily explained. You’ll need a reboot in your machine in order to be sure that the folders are properly added to the path.

The best starting point is using the yo scaffolding tool:

npm install -g yo
npm install -g generator-meanjs

Then, we need to create a fresh copy of MEAN.JS. In this example, I will be using MEAN 0.4.2. That’s the version you should initiate if you want to be sure that my tutorial is working. I’ll ask the generator to create all the available examples. They are quite convenient in order to understand how the code should be structured.

yo meanjs

Let’s say you create a project folder named mean-leaf. Then, you’ll need to get into that folder.

cd mean-leaf

You will need a working global installation of Grunt and Bower. So, if you need to install them:

npm install -g grunt-cli
npm install -g bower

We add the angular-leaflet-directive:

bower install angular-leaflet-directive --save

And now, we use Grunt to run the application:


If you have the error “You need to have Ruby and Sass installed and in your PATH for this task to work”, just execute the following and run grunt again:

sudo gem install sass

Adding the Leaflet maps

With the previous steps, MEAN.js should be up and running. Now, we are going to integrate the Leaflet map. More examples can be found in the angular-leaflet-directive Github page, but I found the “Center example” the most appropriate for having an initial taste.

Remember that you’ll need the angular-leaflet-directive installed as mentioned above.

Adding the required JavaScript and CSS files

We’ll need to add the leaflet CSS and JavaScript files to config/assets/default.js. I found quite useful using the CDN versions, so that’s what I’ll show here. The code will be more or less this (just showing the modified sections):

// (...)

css: [

// (...)

js: [

// (...)

This works the same with any other external CSS or JavaScript file you want to add.

Using the directive

In the file modules/core/client/app/config.js we need to add the directive to the dependences. We will just add it to the array in line 7:

// (...)

var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ngMessages', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload', 'leaflet-directive'];

// (...)

Now, we need to add the JavaScript to /config/assets/default.js. Is the same file we used previously, but now we’re adding a line in the client > lib > js section. After the changes, it will be something like this:

// (...)

js: [

// (...)

Inserting a map

We will add the following code somewhere in our view /modules/core/client/views/home.client.view.html to insert the map:


 <leaflet center="center" markers="markers" url-hash-center="yes" tiles ="tiles" height="400"></leaflet>
 <form class="text-center">
 Latitude :
 <input type="number" step="any" ng-model=""> Longitude :
 <input type="number" step="any" ng-model="center.lng"> Zoom :
 <input type="number" step="any" ng-model="center.zoom">



But that’s is not enough. We need do some modifications to the code of the controller modules/core/client/controllers/home.client.controller.js (be very careful with the indentation here, WordPress is breaking the code and it’s important):

'use strict';

angular.module('core').controller('HomeController', ['$scope', 'Authentication',
 function($scope, Authentication) {
 // This provides Authentication context.
 $scope.authentication = Authentication;

angular.extend($scope, {
 center: {
 lat: 51.528308,
 lng: -0.3817736,
 zoom: 7
 defaults: {
 scrollWheelZoom: false
 tiles: {
 Name: 'Stamen Toner Lite',
 url: 'http://stamen-tiles-{s}{z}/{x}/{y}.{ext}',
 options: {
 ext: 'png',
 attribution: 'Map tiles by <a href="">Stamen Design</a>, <a href="">CC BY 3.0</a> &mdash; Map data &copy; <a href="">OpenStreetMap</a>'

This should be enough. Just run grunt and visit your website. If you have errors with eslint and the indentation, just edit modules/core/client/controllers/home.client.controller.js and make the modifications displayed in the console.

The result should be something like the following screenshot:

MEAN.JS + Leaflet screenshot

The example used for this article, and many others, are available in the angular-leaflet-directive examples gallery, and also in their Github.


Arduino up and running in 1 minute 20 seconds

Sorry guys, only if you are using Linux you can have Arduino up and running after only 1:20 (approx) , and the only thing you need to do is to write 1 single code in the terminal:

[codebox 1]

setupandrunning from Jumy Elerossë on Vimeo.


Open the Arduino IDE, press “Add” on the screen that appears, reboot the computer, open again the Arduino IDE, connect your board to your PC, select the serial port under “Tools > Serial port”, select your board model from “Tools > Board” and.. Presto!

You can upload the blink example (any other component but the Arduino board is required) just selecting it at “File > Examples > 01. Basics > Blink” and press “Upload”.

Do you need something easier?

Cooking a new project

I’m beginning with a new project: a cheap and easy hypsometer.

As I’m studying Forestry Engineering, I realised how important is the measurement of trees (and other elements) for a correct study of the environment. The problem is… Well… The object we want to measure can be not easy to reach or is too tall. With the hypsometers we solve that problem, as we use optical tools and geometric calculations to perform the measures. However, the hypsometers are very expesive tools, and that is a problem, especially for development countries.

My intention is to build an advanced digital hypsometer, but using the cheapest components. That means that I will develop both Arduino and Android versions, and I will compare time and resources used (time is gold).

If everything goes right, I will also add some functions to the Arduino version (for example, Bluetooth connection for using a smartphone/tablet to analyse or store the data).

About the old posts…

Thinking and thinking… I really believe that my old posts are too outdated right now. Instead of reposting old material, I will write new things. If you need something that I wrote then, you can try searching at

Open with… Adobe Acrobat

Let’s face it. Linux is (almost) free. Linux is Open Source. But if a company have a product and don’t want to share their technology, we can:

a) Wait until somebody figures up how to replicate their technology or…

b) Install closed and proprietary software.

Sometimes we have no alternative and we must choose the b) option. This happens sometimes with the PDFs. The built-in PDF reader in almost all distros come with a more-than-decent compatibility and is really complete. However, some things like formulas are not going to be shown properly. The solution is as easy as installing the official Adobe Acrobat Reader.

Nevertheless, due to a little bug, under some distros like Linux Mint, if you try to open a file with Acrobat Reader using the [Right Click] > Open With you will discover that… Open with Acrobat Reader is missing!!!

To solve it we need to edit the desktop file using the terminal:

[codebox 1]

Then, we find the line beginning with Exec= and we edit it to be like this:

[codebox 2]

We save the file and… Tada! Now we can find Adobe Acrobat under the [Right Click] > Open With menu. You can even set Adobe Acrobat as the default program for the PDFs.


Adobe PDF icon