AngularJS Country Picker

Every time that I need to implement a registration form there is some source of country selector; thus I decided to create a small component to generate the list of countries as options of the select element.

The ISO 3166 defines three different codes (two-letter, three-letter and numeric) for every country so I wanted this to be configurable in the component, bounding the ngModel to any desired value.

And of course, I didn’t want to wrap or rewrite the native select, but only work with the ngOptions attribute.


Trying to implement this on a clean way was a really interesting exercise which made me struggle for a while but also learn more about the internals of AngularJS.

First I learnt about the execution order of the compile, preLink and postLink functions when using an element directive with an attribute directive. And you can see the results opening the console of this JSFiddle.

After that lesson I was sure that I needed to use the compile function of my custom directive to set the ngOptions of the element, because it gets fired first. But I couldn’t solve it until I realized that the tAttrs passed as an argument of the compile function is shared between all directive compile functions.

Thanks to that discovery the final implementation was easier than expected since we just need to set the ngOptions on the shared tAttrs list during the compile phase. As a side note I want to clarify that the attributes object could have been modified either in the directive controller or the preLink function with similar outcome, but not in the postLink as its fired after the parent is linked.

  .directive('pvpCountryPicker', function() {
    var countries = [
      // Alphabetical list of countries.

    return {
      controller: function($scope) {
        $scope.countries = countries;
      compile: function (tElement, tAttrs) {
        if(! tAttrs.pvpCountryPicker) {
          tAttrs.pvpCountryPicker = 'alpha2';
        var ngOptions = 'country.' + tAttrs.pvpCountryPicker + ' as for country in countries';
        tAttrs.$set('ngOptions',  ngOptions);
      restrict: 'A'


Most of the time in our community what yesterday worked today is outdated, and with the major rework being done in the beta version of Angular 1.4 my implementation does not work any-more. So hopefully I will be able to fix it before Angular 1.4 become stable.

Additionally I read some old post about redesigning the country selector which makes some interesting points hence I would like to work that idea in the future.

But for now you can install it using Bower or fork it from the repository.

$ bower install angular-country-picker

Mediator pattern in AngularJS

Before I left my previous company, I decided to introduce the mediator pattern in order to encapsulate the communication between our data models and the WebSocket. Although the implementation was a bit simple, I think it has a lot of power and future possibilities, making the code cleaner and unit testing live updates easier.

To read more about JavaScript design patterns there is an amazing book written by Addy Osmani and a follow up, where you can understand better the mediator pattern.

A basic mediator provides methods to subscribe, publish and unsubscribe from a channel, keeping track of the channels and the methods that have to be executed on the subscriptors when new content is published to a channel.

  .service('Mediator', function Mediator() {
    var channels = {}; // Associative object.

    this.publish = function(channel, data) {
      if (! channels[channel]) {

      var subscribers = channels[channel];

      angular.forEach(subscribers, function(subscriber) {

    this.subscribe = function(channel, id, cb) {
      if (! channels[channel]) {
        channels[channel] = [];

      return channels[channel].push({
        'callback': cb,
        'id': id

    this.unsubscribe = function (channel, id) {
      if (! channels[channel]) {
        return false;
      for(var i = 0, len = channels[channel].length; i < len; i++) {
        if (channels[channel][i].id === id) {
          var removed = channels[channel].splice(i, 1);
          return (removed.length > 0);
      return false;


Our data models then subscribe to a determined channel so they can get updated.

  .factory('Match', function (Mediator) {
    function Match(data) {
      angular.extend(this, data);
      Mediator.subscribe('match:update',, angular.bind(this, this.update));

    Match.prototype.update = function(updatedMatch) {
      // Update model with new data.

    Match.prototype.close = function() {

    return Match;

And the socket publishes to the corresponding channel every time that an update is received.

  .factory('socket', function (Mediator) {
    var socket = io(); // Socket.IO exposes a global io variable.

    socket.on('match:update', function (data) {
      Mediator.publish('match:update', data);

    return socket;

This way we could have several sources of information to update our models, or we could get rid easily of Socket.IO and substitute it with other library, without modifying the code of our data model objects.

How I joined Toptal

Back in October I got an invitation to join Toptal which is a platform that connects top class engineers with software companies.

What makes it different from other freelancing networks is that all the applicants go through a selection process and only 3% of them are accepted.

I decided to give it a try leveraging the fact that I was unemployed during November. And after a tough but rewarding process I got accepted a couple of weeks ago.

English proficiency

The first call was a short explanation of the whole process and they use it mainly to check your English level assuring that you can communicate properly.

Coding exercise

In the next 48 hours after the call I had to do a coding exercise in Codility, a Polish start-up that tests programmers. It consisted of three tasks to be solved during 90 minutes; although it’s not necessary to finish them all and I managed to resolve just two.

These algorithms are evaluated both in performance and correctness. And the training center it’s a good place to challenge yourself resolving problems.

Technical interview

A couple of days later I got the link to schedule a technical interview with a senior engineer. The talk started with the evaluation of the previous exercises and after I was asked to share my screen while writing code on a JSFiddle.

Whereas Codility’s tasks were more “mathematical” and could be solved in any language, this was a front-end specific task and I chose AngularJS to solve it gracefully in less than 10 minutes.

Final project

For the final project I was given some old wire-frames that I had to transform to HTML with valid mark-up and proper styling in CSS, implementing the dynamic functionality with JavaScript and paying special attention to the responsiveness on mobile devices.

The code had to be committed to their private Git repository as if it would be a real life project. After two weeks working hard I showcased my project to another senior engineer who evaluated the code and the development itself, accepting me into the network.


I haven’t started yet to work in any project but the mere act of going through the selection process was enriching. And even though the amount of time invested to get inside is huge, I have read nothing but satisfied opinion about the platform. So if you want to face a new challenge don’t hesitate to apply.

MongoDB Certified Developer, Associate Level Exam

Yesterday I got the positive results of the C100DEV: MongoDB Certified Developer Associate Exam that I took one month ago on October 7th, being this my first professional certification.


Back in February I decided to join some of the free courses that MongoDB offers on-line. These courses run during seven weeks and each lesson consists of short-videos and quizzes with a final homework assignment that has to be finished before the end of the following week. At the end of the seventh week there is a final exam that counts half towards the final grade, being the six weekly assignments the other half.

It was pretty interesting to invest time on it as I gained a deeper knowledge of MongoDB, successfully finishing the M102: MongoDB for DBAs in April with a 96% grade and the M101JS: MongoDB for Node.js Developers in May with 95%.

MongoDB invited in September some of their former students to do the pilot exams in a new testing platform, but I made it just to the waiting list. Surprisingly and with the examination period already started, one of the 50 spots was opened and I registered to take the exam. Problem was that I had less than three days to prepare the exam.

With such a short time to study I decided to buy the book MongoDB: The Definitive Guide, 2nd Edition by Kristina Chodorow. And although I couldn’t read it all, it helped me a lot to prepare the exam as it’s really detailed and easy to follow. Together with the free courses, this book it’s a good investment to face a certification exam.


The exam was scheduled at 9:00 am in Examity and after being introduced to my proctor (a friendly Indian guy who watched me along the duration of the exam), verify my ID to check my name and my face, and show him my room and desktop to find cheat sheets; I had 90 minutes to complete it.

If I recall properly there was 54 questions which are multiple choice, what adds certain complexity. These questions were divided in seven blocks starting with Philosophy & Features. The trickiest ones were all the referred to CRUD (Create, read, update and delete operations). Indexing and aggregation were easy to follow with some thinking. Data modelling was pretty straight forward. And although I was a bit scared before the test about Replication and Sharding; at the end they were the easiest probably because these tasks are more related to the database administrator than to the developer.

I passed the exam with a score of 637 when the minimum required was 490, what makes me estimate that I failed just six questions.

Four days in Paris for ng-europe

Last Sunday, October 19th, I flew to Paris to spend four days in the first AngularJS conference in Europe. And these is my summary and some notes about the great experience there.

Full Day Workshop with

Monday was the start with a full day training by John Lindquist and Joel Hooks. And I have to say that was pretty impressive to have them in front of us after watching so many of their videos at

But the workshop itself was rather disappointing and it would have been better called “Introduction to AngularJS” with basic usage of controllers, services, ui-router and directives.

For those more experienced with the framework they offered us two challenges building a grid and a shopping cart with the data provided in their egghead-board-game-store repository.

But there came the biggest problem of the conference and it’s that the WiFI of Espace Charenton was terrible and didn’t support the load. So they had to pass the files in a USB key throughout the room but even after, I wasn’t able to run a clean npm install of the dependencies in the whole day.

It was an unproductive day but the slow internet connection and the use of verbose output inspired my colleague Samuel to build with fun the plugin BeBusy.js.

AngularJS Sprint with Vojta Jína

After a disappointing start of the week, on Tuesday we headed to the nice office of Valtech and the place was quite comfortable with internet running smoothly.

Rodric Haddad leaded the event from the start to the end while Vojta Jína and Jeff Cross joined straight from the airport around noon. The sprint consisted in choosing one or more of the tagged issues pending of pull request and try to fix them.

It was great to dig into the roots of the framework and I managed to fix a small issue with the $observe method. Having first hand help from the experts was amazing and after the pull request was merged I can say that I’m one of the +1000 contributors to the core.

As a prove I got a great AngularJS t-shirt and also won an Anker external battery and a monopod (selfie stick) from the sponsors.

Conference Day 1

Wednesday was the big day and the conference opened with Judy Tuna singing about AngularJS; followed by a funny talk between Igor Minar and Bradley Green.

There was really great talks during the whole day but I was highly impressed by the speed while coding of Andrew Joslin in his presentation of Ionic framework to build hybrid mobile apps with AngularJS.

Vojta carved the sentence of the day “Most code is broken and we don’t know why.” during his session “Can We Learn from Architects?”.

I liked to discover Dgeni which is a tool to generate documentation and was nicely explained by his author, Pete Bacon Darwin.

I learned a bit more about Protractor during the talk of Julie Ralph and Chirayu Krishnappa who gave some interesting insights like the Page Objects to re-use elements and browser.pause() for debugging.

And Matthieu Lux was able to build AngularJS from scratch showing the magic behind the framework with special thanks to Tero Parviainen, author of the book “Build your own AngularJS”.

Lightning talks contest

After a full day with thirteen talks by the professionals, there was time before dinner for regular people to show their awesome projects in short talks. These are the four that I noted over more than ten featured topics:

The winner of the contest was Gabriel Obregon with his mocked backend workflow.

Conference Day 2

Thursday was opened by Miško Hevery, father of AngularJS, showcasing AtScript, built on top of TypeScript.

Miško was followed by the big talk between Igor Minar and Tobias Bosch which was probably the scariest talk because comparing 1.3 and 2.0, the latest literally kills everything from the previous: controller, directive definition object, $scope, angular.module and jQLite will be gone. Some of the syntax will be different as well but all the new changes look promising as there has been a whole re-think of the framework.

I didn’t know about but Zack Brown showed how to do complex animations with JavaScript achieving the same behaviour in the browser than that of the native applications.

Martin Gontovnikas came all the way from Buenos Aires to talk about his service Restangular to handle Rest API Restful Resources.

And the speaker who won the entire audience was Lukas Ruebbelke sitting in a chair talking about Firebase and AngularFire to build realtime apps.

Unfortunately our plane was leaving early so we missed the last four talks and the Q&A session which I’m sure were as great as the previous talks.


It was amazing to be part of an event like this were 850 developers met together in Paris during two days. So I have to congratulate Patrick AljordDouglas DuteilOlivier LouvignesJosh Moont and the rest of the ng-europe team as well as the sponsors for making it possible. I have to say also that the food and the wine by the chef Jean-Jacques Massé were outstanding.

The slap on the wrist in this case would be for Espace Charenton not being completely ready for such an event with their WiFi problems; which in any case should have been checked before.

I very much enjoyed meeting some of the guys working in Google and be coding side by side with them. And it was cool to meet and talk with so many great developers from everywhere in the world; but I can’t list all of them here, so cheers for all off you and see you next year!

If you want to know more about the conference there is an useful repository with collaborative notes and links to most of the slides; and the videos will be available on-line soon.

Keep calm and use AngularJS