Amazing Bernese Alps in the Background

Sep 19, 2022 | Picture | Vaud | Switzerland

Yesterday when we were on our way home, my gf pointed out the window and said "look, look there in the background". I couldn't see at the beginning what she was talking about but then yeah, the amazing Bernese Alps where on full display there in the background. I quickly snapped this shot with my phone that you can see in the picture above. Really nice!.

Beautiful Sunset Sky in Vaud

Sep 2, 2022 | Picture | Vaud | Switzerland

A couple of days ago I was testing my electric bike, doing a ride from the university to Vevey (about 25 km). At some point when the sun light was getting started to dim, I decided to stop and look back and I saw this beautiful sky that I captured in the photo you find in this post.

Map, Filter and Reduce in JS

Aug 30, 2022 | Programming | Javascript | Code

Normally I don't write about programming topics in this blog, since I dedicate it more to pictures, maps and charts, but it happens that a couple of days ago I was explaining to a colleague at work some parts of an internal tool in which we use React and functional programming.

And it is true that if you haven't had experience with the higher order functions of javacript of map, filter & reduce, they might appear daunting at the beginning. But once you get used to them you never look back!. They are extremely useful in manipulating arrays and arrays of objects

So objective of this post is to explain the three of them using a simple example.

Data

Let's create a quick array of objects with the 5 top five movies of all times according to the imdb ratings:


const top5Movies = [
    {
        "title": "The Shawshank Redemption",
        "rank": "1",
        "id": "tt0111161",
        "imdbrating": "9.3",
        "year": "1994",
        "genre": "Drama",
        "director": "Frank Darabont",
        "actors": "Tim Robbins, Morgan Freeman, Bob Gunton",
        "language": "English",
        "country": "United States"
    },
    {
        "title": "The Godfather",
        "rank": "2",
        "id": "tt0068646",
        "imdbrating": "9.2",
        "year": "1972",
        "genre": "Crime, Drama",
        "director": "Francis Ford Coppola",
        "actors": "Marlon Brando, Al Pacino, James Caan",
        "language": "English, Italian, Latin",
        "country": "United States"
    },
    {
        "title": "The Godfather: Part II",
        "rank": "3",
        "id": "tt0071562",
        "imdbrating": "9.0",
        "year": "1974",
        "genre": "Crime, Drama",
        "director": "Francis Ford Coppola, Mario Puzzo",
        "actors": "Al Pacino, Robert De Niro, Robert Duvall",
        "language": "English, Italian, Spanish, Latin, Sicilian",
        "country": "United States"
    },
    {
        "title": "Pulp Fiction",
        "rank": "4",
        "id": "tt0110912",
        "imdbrating": "8.9",
        "year": "1994",
        "genre": "Crime, Drama",
        "director": "Quentin Tarantino",
        "actors": "John Travolta, Uma Thurman, Samuel L. Jackson",
        "language": "English, Spanish, French",
        "country": "United States"
    },
    {
        "title": "The Good, the Bad and the Ugly",
        "rank": "5",
        "id": "tt0060196",
        "imdbrating": "8.8",
        "year": "1966",
        "genre": "Adveture, Western",
        "director": "Sergio Leone",
        "actors": "Clint Eastwood, Eli Wallach, Lee Van Cleef",
        "language": "Italian, English",
        "country": "Italy, Spain, West Germany"
    }
]

Map

Let's say a friend says to you, ah great that dataset, but could you give me sjust a list with just the titles of those movies? In this case map is your friend :). This method loops over an array and runs a function on each element of the array, returning the modified value as a new element of a new array.

In our case we want to loop over this top5Movies array and just extract the titles:


const titles = top5Movies.map(movie => movie.title)


So with this simple statement we loop over each "movie" item (an object), and apply a simple function (with arrow notation) that returns the title (default return), and assigns them to this new titles array. If we look at the contents of this array, our titles should be there:

> titles
[
  'The Shawshank Redemption',
  'The Godfather',
  'The Godfather: Part II',
  'Pulp Fiction',
  'The Good, the Bad and the Ugly'
]

If you want to better understand the concept, think about it withour arrow notation: top5Movies.map(function (movie) { return movie.title }). As you can see there you are applying a function to each iteration and returning the value.

Please also note that the map method will always create a new array without mutating the original one.

Filter

Now let's say another friend asks you if you can give him a a copy of this array of objects, but including only those in which Spanish is spoken during the movie. This where the filter operation can be quite useful. This method iterates over the source array, but instead of returning a modified copy of your array element, just test the codition defined in the function an returns a copy of the original element if the condition is met.

So for this request will check if the field "language" includes the string "Spanish":


const topMoviesWithSpanish = top5Movies.filter(movie => movie.language.includes("Spanish"))


The new created topMoviesWithSpanish array will only include:


[
    {
        "title": "The Godfather: Part II",
        "rank": "3",
        "id": "tt0071562",
        "imdbrating": "9.0",
        "year": "1974",
        "genre": "Crime, Drama",
        "director": "Francis Ford Coppola, Mario Puzzo",
        "actors": "Al Pacino, Robert De Niro, Robert Duvall",
        "language": "English, Italian, Spanish, Latin, Sicilian",
        "country": "United States"
    },
    {
        "title": "Pulp Fiction",
        "rank": "4",
        "id": "tt0110912",
        "imdbrating": "8.9",
        "year": "1994",
        "genre": "Crime, Drama",
        "director": "Quentin Tarantino",
        "actors": "John Travolta, Uma Thurman, Samuel L. Jackson",
        "language": "English, Spanish, French",
        "country": "United States"
    }
]

Since those are the movies that include "Spanish" in the language field. As it was the case with map, filter will create a new copy of the array so the original is not mutated.

Reduce

Finally another friend asks you if it is possible to give the average of the ratings of those top 5 movies. So you say sure man, you take the map function you already learned and say to him, here are the ratings:


> top5Movies.map(movie => parseFloat(movie.imdbrating))
[ 9.3, 9.2, 9, 8.9, 8.8 ]


And your friend says well thank you, but what I mentioned is that want the "average" of those.
You start to think about it 🤔, and reliase you need to iterate over each rating but instead of changing it, you need to sum it to the next one and so on, and once you have the final sum, you can divide it by the number of ratings.
This process of "aggregating" values is exactly what the reduce method, it iterates over each element and applies a function you define with the item and the aggegator.
Lets take those ratings and let's aggregate (sum) them together:


> [ 9.3, 9.2, 9, 8.9, 8.8 ].reduce((aggregator, rating) => (aggregator + rating))
45.2

As you can observe your ratings array was "reduced" to a single value that's the sum of the ratings.

Using this principle we can chain our map function extracting the rating with this reduce one, and by diving by the number of items we can give the average answer to our friend:


> top5Movies.map(movie => parseFloat(movie.imdbrating)).reduce(
      (aggregator, rating) => (aggregator + rating)) / top5Movies.length;
9.040000000000001


And that's it!. I hope this post will be useful to understand better the map, filter & reduce high order functions in Javascript.

Heatwave in Europe

Jul 19, 2022 | Picture | Spain | Europe | Weather

These days I had the opportunity to visit the city of Cubelles, a catalan tourist town near Barcelona. I was very lucky to find an apartment very close to the beach and I have spent almost every day enjoying the sea, constantly refreshing myself.

But every time I watch the news I realize that I was lucky to spend my days there during the heat wave that is hitting Europe. There are roaring fires in many places in southern Europe, and on the other hand places where the summer is not particularly strong like the UK are experiencing record temperatures.

No comments. The Climate Change problem is already here :/

Back in Berlin

Jun 1, 2022 | Pictures | Berlin | Europe

A few days ago I had the opportunity to visit Berlin again and I spent some very pleasant days in the company of my dear friend C. In those days I remembered why the German capital is one of my favorite cities in Europe, and although I am satisfied with my life at the moment, I will always miss that very interesting place!

One of the things I was always curious about before leaving Berlin was what had happenned with the famous Humboldt Forum. I remember the first time I visited that space in 2015: At that time it was atemporary construction, created by the Humboldt foundation, that served as an exhibition space and viewing platform for the Berlin Palace - Humboldt Forum reconstruction project.

Well 7 years later, this project is finished and the palace is back to his former glory (at least the exterior facade) and it has some interesting expositions inside. Above you can find a picture on how it looks like nowadays. bis (hoffentlich) bald, Berlin

Next page