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.

Tagged , , ,

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.

Tagged , , , ,

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 egghead.io

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 egghead.io.

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 famo.us 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.

Conclusion

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

Tagged , , , , ,

Mocking Services for AngularJS tests

One of the things that I’ve enjoyed more in the last year is Test Driven Development, with the satisfaction of seeing the green after all tests have passed. AngularJS is written with testability in mind which makes testing applications easy. And although it can be hard to grasp at the beginning, there a lot of good resources around to learn how to unit test the application logic.

But in this post I want to focus in writing mock objects. In previous versions of the AngularJS generators for Yeoman there was a mock folder generated inside of the test directory. This made me think on a way to write separated files for every necessary mock so we can include them where required. With the new structure recommendations this mock folder has been removed, but the point of writing separate files it’s the same.

Let’s say we have a complex Auth service to deal with user authentication.

angular.module('webApp')
  .factory('Auth', function($http) {
    var currentUser = {};    
    return {
      login: function(credentials) {
        $http.post('/api/auth', credentials).then(function(response) {
          currentUser = response.data.user;
        });
      }, 
      logout: function() {
        currentUser = {};
      },
      isLoggedIn: function() {
        return !!currentUser.id;
      } 
    };
  });

This service could be injected in a controller to submit a form just if the user is logged in.

angular.module('webApp')
  .controller('ContactCtrl', function(Auth) {
    this.showAlert = false;
    this.submitted = false;
    this.submitForm = function() {
      // If the user is not logged-in, return and display the alert.
      if (!Auth.isLoggedIn()) {
        this.showAlert = true;
        return;
      }
      // Handle form submit.
      this.submitted = true;     
    };   
  });
<div ng-controller="ContactCtrl as contact">
    <form name="contactForm" ng-submit="contact.submitForm()">
        <button type="submit">Submit</button>
        <div class="alert" ng-if="contact.showAlert">
            Please <a href="/login">login</a>
        </div>
    </form>
</div>

Note that for the sake of example, the code of the service has been reduced to a minimum while the form controller it’s pretty dumb; this way we can just get the idea of the functionality and focus in writing the mock object.

How to mock our Service?

Another long topic in AngularJS is the difference among Factory, Service, Value, Constant and Provider. But for creating the mock we just need to know that these five types are built on top of Provider, so the injector is going to look for an AuthProvider.

To write our Provider we don’t need to use $http to interact with the backend, as we just need to emulate the functionality.

angular.module('authMock', [])
  .provider('Auth', function() {
    this.userLoggedIn = false;
    this.$get = function() {
      return  {
        login: function() {
          this.userLoggedIn = true;
        },
        logout: function() {
          this.userLoggedIn = false;
        },
        isLoggedIn: function() {
          return this.userLoggedIn;
        }
      };
    };
  });

So we can unit test our Controller injecting the mocked Service.

describe('Controller: ContactCtrl', function() {

  // Load the controller module.
  beforeEach(module('webApp'));
  // Load the mock service module.
  beforeEach(module('authMock'));
    
  var ContactCtrl, Auth;
  // Initialize the controller and the mocked service.
  beforeEach(inject(function($controller, _Auth_) {
    Auth = _Auth_;
    ContactCtrl = $controller('ContactCtrl', {
      Auth: Auth
    });
  }));
    
  it('should submit the form if the user is logged in', function() {
    Auth.login();
    ContactCtrl.submitForm();
    expect(ContactCtrl.submitted).toBe(true);
  });
    
  it('should not submit the form if the user is not logged in', function() {
    Auth.logout();
    ContactCtrl.submitForm();
    expect(ContactCtrl.submitted).toBe(false);
  });
  
});

I have put all this code together on a JSFiddle so you can see the specs passing.

Tagged , , ,

AngularJS Capitalize Filter

Over a month ago I was messing around with CSS when I realized the text-transform property with the capitalize keyword works just with lowercase text, as it forces the first letter of each word to be converted to uppercase keeping the rest of the characters unchanged.

In the current project I’m working on I’m getting uppercased text from the Rest API so this was the perfect scenario to create my first AngularJS filter. Moreover, as we are working with team names, we need a special letter case where team abbreviations are displayed like CD Logroñés or FC Barcelona.

It was really simple for me to create this filter and I decided to open source it as it might be helpful for somebody else who needs capitalization or just as a base for developing a custom filter.

angular.module('angular-capitalize-filter', [])
  .filter('capitalize', function() {
    return function (input, format) {
      if (!input) {
        return input;
      }
      format = format || 'all';
      if (format === 'first') {
        // Capitalize the first letter of a sentence
        return input.charAt(0).toUpperCase() + input.slice(1).toLowerCase();
      } else {
        var words = input.split(' ');
        var result = [];
        words.forEach(function(word) {
          if (word.length === 2 && format === 'team') {
            // Uppercase team abbreviations like FC, CD, SD
            result.push(word.toUpperCase());
          } else {
            result.push(word.charAt(0).toUpperCase() + word.slice(1).toLowerCase());
          }
        });
        return result.join(' ');
      }
    };
  });

For now it has just three options: capitalize all the words in a sentence, capitalizes just the first word of a sentence and the special one for team names.

You can feel free to install it using Bower or fork it from the repository.

> bower install angular-capitalize-filter
Tagged , , ,
Follow

Get every new post delivered to your Inbox.

Join 1,046 other followers