The first Polymer Summit in Amsterdam

It’s a long time since I heard about the Polymer project, but I never got the chance to get hands on code, so as soon as I found out about the organization of the first ever Polymer Summit in Amsterdam on September 14-15, I joined without hesitation

Unfortunately, on Monday I couldn’t do much code due to a problem that seems recurrent in every conference I attended and it’s the WiFi not supporting the load and being unstable. It happened during the workshops of ngEurope in Paris and some speakers had problems while showing their examples during the JSConf in Budapest.

So from the fours hours I stayed at the incredible Muziekgebouw aan ‘t IJ venue, more than two were wasted trying to connect to the internet to get something done. Fortunately the code labs will stay online for anybody to try.

Tuesday was a completely different story with a full day of talks and a lot of information to process. From the sixteen talks there were two really powerful: Monica Dinosaurescu almost made me love CSS with Polymer’s Styling System while Laura Palmaro, sharing her story as a visually impaired person, helped to understand better the importance of accessibility with A11y with Polymer.

But the most awesome was to watch on stage two of the greatest web gurus in the world. Addy Osmani showed the Polymer Power Tools with stuff to build, test, lint and serve web components, make them CSP compliant and use a stateless CDN. And Paul Irish performed a live audit of the Google Patents and Polymer Summit website during his Doing a Perf Audit of your Polymer App talk.

To wrap it up the sentence There’s an Element for that by Surma summarizes the exciting future of the web with a great project, that for now still depends of all the major browser vendors copping up with the pace Google is setting with Chrome when implementing web components, so all of us can use them for production changing the way we develop web applications.

Last I have to thank the Polymer Dev Summit team for organizing an amazing event and make it available for free, providing great food, drinks and swag, and giving us the opportunity to meet some fascinating people form all over the world.

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.


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].slice();

      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 opinions about the platform. So if you want to face a new challenge don’t hesitate to apply.