Entretien Technique

Dev front-end Junior 2021

Bien réussir son

Avant l'interview

  • CV honnête et démontrable
  • RH non-spécialistes
  • glassdoor.be
  • Se préparer :
    • skype, internet, tools, horaires
    • syntaxe du langage
    • connaître les tendances
    • jeux de rôle

Décorticage de CV

en live

La présentation technique

  • Ma mission idéale
  • Mon site web préféré 
  • Quelle note je me donne sur 10 
  • Ma dernière expérience passionnante
  • Mon univers de dev
  • Commenter mon CV

Le brise glace

  • questions faciles, mais sérieuses
  • pas obligatoire : respirer, boire, faire au plus simple
  • cinq traits recherchés :
    • curiosité
    • confiance en soi
    • humilité
    • professionnalisme
    • travail d'équipe

Questions de code

Dev JS       /       Integration HTML-CSS

Dev JavaScript

  • types, références et valeurs
  • itérations de listes
  • ES6
  • portée des variables
  • asynchrone
  • fonctionnel
// Décrire le code suivant
var prenom1 = 'Peach';
var prenom2 = prenom1;

// Quelle est la valeur de prenom2 ?

prenom1 = 'Mario';
// Quelle est la valeur de prenom2 ?

Types, références et valeurs

// Décrire le code suivant
var personne1 = {
  prenom: 'Luigi',
  nom: 'Miyamoto'
};
var personne2 = personne1;

// Quelle est la valeur de personne2.prenom ?

personne1.prenom = 'Toad';
// Quelle est la valeur de personne2.prenom ?

Types, références et valeurs

// Que vont écrire dans la console les lignes suivantes ?
console.log('42' == 42);
console.log('42' === 42);

// Les curiosités de JavaScript
console.log(NaN === NaN); // va écrire « false » dans la console
// Connaissez vous d'autres curiosités inattendues de JavaScript  ?

Types, références et valeurs

// Décrire le code suivant
const students = [
  { name: 'Loïc', age: 33 },
  { name: 'Sabrina', age: 35 },
  { name: 'Philippe', age: 24 }
];

// ajouter son profil au personnel de l'entreprise
console.log(students);

// afficher les « name » un par un dans la console

// ajouter l'école « school: "Interface3" » à chacun des étudiants
console.log(students);

Itérations de listes

// Proposez un algorithme pour calculer la moyenne d'âge à Interface3
const students = [
  { name: 'Loïc', age: 33, school: 'Interface3' },
  { name: 'Sophia', age: 35, school: 'Interface3' },
  { name: 'Samir', age: 24, school: 'Interface3' }
];

Itérations de listes

// De quoi ES6 est-il l'acronyme ?
// Citer trois fonctionnalités qui n'existent que depuis ES6
const students = [
  { name: 'Loïc', age: 33 },
  { name: 'Sabrina', age: 35 },
  { name: 'Philippe', age: 24 }
];

students.push({ name: 'Nathalie', age: 28 });

students.forEach(item => console.log(item.name));

let i3Students = students.map(function(item) {
  return { ...item, school: 'Interface3' };
});

console.log(i3Students);

ES6

// Décrire le code suivant
// Que va-t-il écrire dans la console ?
var salutation = 'bonjour';
function saluer() {
  console.log(salutation);
}
saluer();

portée des variables

// Décrire le code suivant
// Que va-t-il écrire dans la console ?
function remercier() {
  var remerciement = 'merci';
}
remercier();
console.log(remerciement);

// Quelle difference avec...
window.console.log(remerciement);

portée des variables

// Décrire le code suivant
const axios = require('axios');
const data = axios.get('https://jsonplaceholder.typicode.com/todos/1');
let a = 42;
// Les data arriveront-elles AVANT ou APRÈS que « a » prenne la valeur 42 ?

// axios.get retourne une promesse. Écrire les data reçues dans la console.

// définir une promesse avec vos propres mots

asynchrone

// Décrire le code suivant
const doubler = a => a * 2;

// en JavaScript, peut-on passer une fonction en argument à une fonction ?

// en JavaScript, une fonction peut-elle retourner une fonction ?

// en JavaScript, est-ce que la syntaxe suivante est valide ?
const fn = a => b => a;

// qu'est-ce que map, reduce et filter ont en commun ?

fonctionnel

Intégratrice: le HTM

  • importance de la structure 
  • en ligne VS en bloc 
  • éléments pour un menu en tête/pied de page 
  • empêcher le clic sur un bouton
  • textarea, thead, canvas, meta

Intégratrice: le CSS

  • différence entre float et flex
  • mobile first et réalisation concrète 
  • animation de chargement
  • conventions de nommage
  • variables, fonctions et système de fichiers en CSS

Jeu de rôle

  • CMS interdits
  • SPA avec API préexistante pour les 5 produits
  • design prêt
  • 100% responsive
  • Structure
    • 1 accueil
    • 1 liste des produits
    • 5 pages produits
    • 1 formulaire de contact
    • header et footer 

Discussion ouverte

  • Questions pertinentes :
    • ambiance, équipes
    • mentors, formations, ressources
    • matériels et technologies
    • comparaison avec les autres entreprises
    • que faut-il améliorer ?
  • À éviter :
    • N'avoir aucune question
    • Est-ce que je suis prise ?
    • RH, salaires, avantages

Rapport d'interview technique

  • Non Junior => refusée
  • Recommended => proposition de mission
  • Highly recommended => proposition sur profil

Le live coding chronométré 1/2

Notre algorithme de tri de colis dois marcher de la manière suivante:

  • colis a hauteur, largeur, longueur en cm, et poids en kg
  • si une face est supérieure ou égale à 150 cm, c'est un encombrant
  • si volume supérieur à 1 000 000 de cm3, c'est un encombrant
  • si son poids est supérieur ou égal à 20kg, c'est un lourd
  • sinon c'est un normal
  • Ecrire en 30 min une fonction pour le traitement de nos colis
    • les normaux retournent "auto"
    • lourds OU encombrants retournent "manuel"
    • les lourds ET encombrants retournent "rejeté"
  • La fonction reçoit les 4 paramètres: 4 entiers positifs
function traitementColis(hauteur, largeur, longueur, poids) {
  // return ...  
}
const colis1 = traitementColis(150, 30, 15, 12); // manuel
const colis2 =  traitementColis(23, 35, 12, 2); // auto
const colis3 = traitementColis(100, 100, 101, 23); //  rejeté
const colis4 = traitementColis(21, 23, 21, 24); // manuel
console.log(colis1, colis2, colis3, colis4);
// écrit dans la console: manuel, auto, rejeté, manuel

Le live coding chronométré 2/2

Notre magasin offre une réduction spéciale: l'article le plus cher dans votre panier reçoit un discount !

  • Écrire une fonction qui prend deux paramètres
    • un array de nombres: le prix des articles du panier
    • un nombre: le % du discount
  • Cette fonction retourne le prix total à payer
  • Ce prix est arrondi à l'euro inférieur
function offreSpeciale(prices, discount) {
  // return ...  
}
const total1 = offreSpeciale([10, 20, 30], 10); // 57
const total2 = offreSpeciale([100, 100, 100], 20); // 280
const total3 = offreSpeciale([12.34, 237.12, 18], 23); // 212
console.log(total1, total2, total3);
// écrit dans la console: 57, 280, 212

Décorticage de VT

en live

Merci à toutes

Chance et courage dans vos interviews

Remerciements spéciaux : Christelle, Sarah, Stéphanie

Entretien technique 2021

By Loïc TRUCHOT

Entretien technique 2021

  • 411