Best talks of JSConf Budapest

May 14 saw the birth of a new technical conference in Budapest that I foresee a very good future. For a really affordable price we had two days of great talks in an outstanding venue, with good food and open bar after-parties.

The talks were paired in practical and theoretical with Q&A after each speaker and coffee-breaks in between each pair. So here I would like to highlight those talks that impressed me more or I consider most useful.

For the practical side there are two videos that I would make my team watch as soon as they are up.

On Thursday Sebastiano Armeli of Spotify spoke about Enforcing coding standards in a JS library; and although it might seem simplistic as something we should already know, by experience I know it’s not like that in every team and it’s good to be reminded. The use of editorconfig and code quality tools like JSHint; automate the build process with Gulp or Grunt; unit testing using Karma and Mocha; standards for the commit messages in order to generate the changelog; and Plato, a tool I have to try to check code complexity.

And on Friday it was Sufian Rhazi with Transform your codebase without breaking a sweat who showed us how the front-end infrastructure team of Etsy transformed their large code-base from CSS to SCSS and its moving now the JavaScript to AMD modules. A lot of nice strategies to accomplish it and one important remark for me, which is the importance of hack days so employees can dedicate their time to investigate and try new technologies.

But the most impressive talks were in the creative side as it was astonishing to see what can be done only with JavaScript.

The first one to blow our minds was Martin Kleppe with his Invisible Code talk. I knew about JSFuck before but the things he can write in 140 characters, using 1024 bytes or not using Latin characters at all are extraordinary. You must check the jaw-dropping examples on his website.

Julian Cheal closed the Thursday Dancing with Robots and although half of the widgets didn’t work it was amazing anyway. Like an old magician Julian started to unveil his tricks from controlling the lights of a party to flying (and crashing) a drone with a PlayStation remote. Everything using plain JavaScript and making the audience laugh. It was brilliant.

On Friday Liv Erickson showed us JavaScript for Virtual Reality, mentioned Cardboard (and made me start thinking about buying one) and let us try the Oculus during lunch. While Jaume Sanchez Elias with Getting things done with three.js and WebGL did pretty neat 3D stuff.

These were just some of my favourite talks but all of them were of great quality and there are many more worthy to watch.

Pascal Precht was the representative of the AngularJS community and with Dependency Injection for Future Generations deepened into the new Angular 2.

The announcement of io.js being merged back to node.js came on Thursday so it was interesting to watch Fedor Indutny on Friday answering “political questions” after his Diving into io.js C++ internals talk.

Stephan Bönnemann had a good point about versioning and described it in We fail to follow SemVer – and why it needn’t matter.

And the best possible end for the event was How you can fix your community in one day by Anika Lindtner talking about diversity and inclusion.

Definitely and as I said, a great conference in a beautiful city with a lot of interesting people. Congratulation to the JSConfBP team and see you next year!

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.

Implementation

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.

angular.module('angular-country-picker',[])
  .directive('pvpCountryPicker', function() {
    var countries = [
      {"name":"Afghanistan","alpha2":"AF","alpha3":"AFG","numeric":"004"},
      // Alphabetical list of countries.
      {"name":"Zimbabwe","alpha2":"ZW","alpha3":"ZWE","numeric":"716"}];

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

To-Do

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.

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

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

      var subscribers = channels[channel];

      angular.forEach(subscribers, function(subscriber) {
        subscriber.callback(data);
      });
    };

    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.

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

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

    Match.prototype.close = function() {
      Mediator.unsubscribe('match:update', this.id);
    };

    return Match;
  });

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

angular.module('webApp')
  .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.

Conclusion

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.

Preparation

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.

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.