Tips for Meaningful Interviews with Developers

Lately I’ve been recruiting people for our Front-End team at Up2 Technology. I am quite satisfied with the process so I decided to share it with you.

This is a non-extensive list with the guidelines I’m trying to follow in order to have an interviewing process satisfying for both me and the people applying.

Empathy

A rule of thumb I follow is to never organize the process in a way that I’d not feel good if I had to go through it as a recruit myself.

Why bother?

Job security is less of a thing than what it used to be, so it would not be a surprise if in a few years (or months) you’re the person being on the other side.

People learn mostly from their own experiences so we have to do our best in such situations. These people will inevitably become senior developers or team leads at a point and will start recruiting themselves. Make sure you show them the best of you!

Skip the whiteboard

I’m happy to see more and more people standing up against the whiteboard debugging sessions. Even though I was prepared for such sessions from the university, where and coding on a piece of paper is not uncommon, I’d still feel very stressed during such situations. As an addition, the whiteboard interview hardly represents the real capabilities of the person being interviewed. I am writing JavaScript for more than 10 years now and still google how some of the Array and Date methods work.

Something I’m very proud of myself is that I’ve never conducted a whiteboard coding session.

What to do instead?

A superior way to see someone’s skills is to give them a realistic task – something that you often receive as a task yourself or that is common for you to assign to your team.

I usually provide an API that returns a JSON and the task is for the person to visualize the returned data however they decide. I do provide some context on what the end-user cares for, but only as high-level details. This is actually what most of our assignments look like.

Additional ideas on how to approach the task for home

  • Give extra time for the people to work on your task (at least 7 days, to include a weekend) – You’re probably not the only company these people are applying for. They might also be still working full-time. Be respectful and give them the time needed so they can be calm while doing your task
  • Limit the time for actual development, which will force an incomplete solution – this will show you what the candidate thinks is most important and what do they feel most comfortable at.
  • Use the task to test their git skills too – ask them to use git as they would in their day-to-day job. (Not using git? Got the idea – ask them to use your system to see if they’d need extra training)
  • Hide a common error you to see how do they handle it – they might figure it out, or they might ask. Whatever they do, I think it is okay – the most important is to notice the error. I intentionally give a CORS error, since this is the most common I got.

Don’t waste their time

Make sure you don’t fool them and you avoid doing harm as much as possible – like asking people to quit before you’re sure that you will be able to hire them (I’ve heard of such super-lame cases).

Once you’ve decided that a person is not your candidate – let them know immediately. Give them the reason you’ve not picked them and move on. They will feel bad, but they’d feel even worse if you’d wasted more of their time.

Avoid Relying on the Trial Period

Most of the positions have some kind of trial period (at least in Bulgaria) where you’re legally allowed to cancel the contract of a person immediately. (They could do that too).

Please, try to avoid that and apply it only in a very edge case. This is causing greater harm to the employee (since most of the time they cannot go back to their old job) than harm to the company – after another set of interviews, you will find the right people for your team.

Maybe Unexpected: Apply for a job in a company you admire (and people like their recruitment process)

Go wild. Apply for the company you’ve always wanted to work for. Check the feedback at glassdoor how their interviewing is.

In the end, they could hire you or not. Either way, you’d witness their recruitment process from within and learn from both the good parts and the bad ones.

Cheers, and go find the people you’d enjoy working with.

AWS Closes S3 Read Stream Unexpectedly

I’m continuing with my notes on transferring big files from and to AWS S3 with node.js

If you are reading a file from a S3 bucket using a stream that you occasionally pause, mind that the read stream will be closed in 60 minutes.

If you cannot handle the file in that period of time, you’d receive a ‘data’ and an ‘end’ event, even though you didn’t finish processing the file.

One possible solution here is to download the file before starting the import, process it and delete it once we don’t need it any more.

//So instead of:
const s3Stream = s3.getObject( params ).createReadStream();
const csvStream = fastCsv.fromStream( s3Stream, csvParams );
/* Do your processing of the csvStream */


// Store your file to the file system
const s3Stream = s3.getObject( params ).createReadStream();
const localFileWriteStream = fs.createWriteStream( path.resolve( 'tmp' , 'big.csv' ) );
s3Stream.pipe( localFileWriteStream );

localFileWriteStream .on( 'close', () => {
    const localReadStream = fs.createReadStream( path.resolve( 'tmp', 'big.csv' ) );

    const csvStream = fastCsv.fromStream( localReadStream , csvParams );

    csvStream.on( 'data', ( data ) => {
        /* Do your processing of the csvStream */
    });

    csvStream.on( 'end', () => {
        // Delete the tmp file
        fs.unlink( path.resolve( 'tmp', 'big.csv' ) );
    });
);

JavaScript Събития (Custom Events) без DOM простотиите

Събитията са много добра техника да направите кода си независим между различните модули. С тях може да пишете значително по-добър и по-лесен за поддръжла JS.

Въпреки това има много случаи в които няма нужда обектите в кода да разчитат на DOM дървото за да вдигат събития. (Например когато репрезентацията на самия обект е на няколко места в страницата или такава репрезентация може да липсва дори).

Това беше и причината да напиша супер проста JS библиотека – eventy.js – С нея можеш да направиш всеки обект от кода си такъв, какъвто да вдига събития (events) и да предоставя начин за абониране към тях.

Работи дори за класове, които си си дефинирал и може да се вдигат събития от класа или от инстанция на този клас. (Същото важи и за абонирането).

Пробвай го на https://github.com/ninio/eventy.js

jQuery error .apply( matched.elem, args ); undefined is not a function

If you’re having an error in your site/app that says that is undefined is not a function and the error happens on the row containing .apply( matched.elem, args ); (jquery.js:4676 for version 2.0.3). You can do the following 2 things to figure out the error:

0. You need Chrome Dev Tools
1. Enable async for your dev tools
2. See in the call stack which is your file that attached the event listener and more important – which event was the one that is currently being handled. Mind that the funciton that is attaching to the event causing the error is highly likely that is not the problematic one. Usualy the problematic event subscription is one that cannot be invoked so probably you won’t see it in the list.
3. Look through your site/app for attaching a handler to the problematic event that is not defined. Remember – the event is the important part, not the selector.

For example

function myHandler ( event ){ console.log( 'jquery rulez!' ); }

$( document ).on( 'change', '.otherInput', function() {
 console.log( 'Yeah!' );
});

$( document ).on( 'change', '.myInput', myHandlerFunction );

In this case the myHandlerFunction is not defined (maybe because we forgot to rename it). So on the change called it will give us the error that undefined is not a function.

It was really annoying trying to figure out what did just break since the problem will happen on every triggering of any change event in the document.

Cheers and follow me on twitter

It’s time to stop fooling ourselvs with touch device detection

To all you JS guys out there: It’s time to stop fooling ourselves. The fact that a user has a touch capable device doesn’t mean he’ll be using it with touch only.

Not sure what I’m talking about? There you go:

 var clickEventToUse = ( 'ontouchstart' in window ? 'touchend' : 'click' )

Still not sure?

Now imagine a laptop with touchscreen (it’s a rising number of laptops). This code forces the user in using only the touch capabilites of the laptop even though he might be just willing to do the things with a keyboard and a mouse.

Now imagine the annoyance if the user is working with additional display that is without touch screen. Yep – you have to move the window to the other screen in order to do the thing you want to.

And the fix can be actually simple:

function doSomething() {
    // don't look, do something
}
$( 'selector' ).on( 'click', function( e ) {
    doSomething();
}).on( 'touchend', function( e ) {
    e.preventDefault(); // we don't want the click triggered second time, do we?
    doSomething();
});

P.S.: I do have such laptop and it’s annoying!

Making async ajax calls to an array of url’s and processing their responses at once

Today I had a very interesting case where we needed to get a specific amount of SVG files with ajax calls that were to be processed once after all of the requests are done.

I was familiar with the $.when and used it before but only in casese where the number of the calls were fixed amount.

So something like this:

$.when( $.ajax( 'first.svg' ), $.ajax( 'second.svg' ) ).done( function( ajax1, ajax2 ) {
    // do stuff with both things.. as ajax1[0] is the svg document
    // for the first.svg and ajax2[0] is the svg document for the 
    // second.svg
});

It’s clear that we are going to use something similar.. so we tried putting the ajax requests into an array so we can dinamically add them.

// svgUrlArray is an existing array with all the urls of the svgs

// we create a new array with all the ajax calls
var svgAjaxArray = [];

for( var svgIndex = 0; svgIndex < svgUrlArray.length; svgIndex++ ) {
    svgAjaxArray.push( $.ajax( svgUrlArray[ svgIndex ] ) );
}

Now we give the array to the $.when

$.when( svgAjaxArray ).done( function() {
    // this is executed a bit too early 
});

The done function is executed too early. Why?

Because the Array is not a Deffered – it’s just an Array and it gets its value immediatley. So the done is executed right away.

So what’s the easiest solution?

$.when.apply( $, svgAjaxArray ).done( function() {
    // Now we're talking ;)
    // You must use the arguments variable to get all the entries
    // because you don't know what is the length of the ajaxArray
});

So now we can do any amount of async requests and process them after all of them are done. Hooraaay!

JS Date object and iOS Safari

Safari on iOS is probably one of the best mobile browsers. Still there is one thing that I often got wrong and wonder why my webapp doesn’t work.

Javascript Date Object in iOS Safari

In every normal browser you could just create a Date object from string as

var myDate = new Date('2013-01-21T13:46:20');

But on iOS this simply gives you a JS error.

To fix it you should use the good ol’ split() and do something like this

//First we split the date string
var iosDateArr = '2013-01-21T13:46:20'.split('[- :T]');
//And use the constructor with 6 args
cDate = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);

Note that the Month in the array is reduced by one. This is because the Months are counted from 0 for January to 11 for December.