diff --git a/French/README_FR.md b/French/README_FR.md index 034cbf1..ac9a3e3 100644 --- a/French/README_FR.md +++ b/French/README_FR.md @@ -1,114 +1,189 @@ -# QUESTIONNAIRE DE RECRUTEMENT +#Front-end Job Interview Questions -@version 1.0 +Ce dépôt contient un certain nombre de questions pour entretien avec des développeurs front-end qui peuvent être utilisée sur des candidats potentiels. Il n'est en aucun cas recommandé de poser toutes ces questions à un unique candidat (ça prendrait des heures). En choisir quelques-unes de cette liste devrait vous aider à vérifier les compétences dont vous avez besoin. -## Contributors +L'article [Bases pour les développeurs front-end](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/)[en] de [Rebecca Murphey](http://rmurphey.com/) est aussi une bonne ressource à lire avant de lancer dans un entretien. -@bentruyman (http://bentruyman.com/), @roger_raymond (http://twitter.com/iansym), @ajpiano (http://ajpiano.com/), @paul_irish (http://paulirish.com/), @SlexAxton (http://alexsexton.com/), @boazsender (http://boazsender.com/), @miketaylr (http://miketaylr.com/), @vladikoff (http://vladfilippov.com/), @gf3 (http://gf3.ca/), @jon_neal (http://twitter.com/jon_neal), @wookiehangover (http://wookiehangover.com/) and @darcy_clarke (http://darcyclarke.me) +**Note:** Gardez en tête que la plupart de ces questions sont ouvertes et qu'elles peuvent mener à des discussions intéressantes qui vous en apprendront plus sur les capacités de la personne, qu'une question directe le ferait. -## General Questions: +## Table des matières -* Êtes-vous sur Twitter ? - * Si oui, qui suivez-vous ? -* Êtes-vous sur GitHub ? - * Si oui, donnez quelques exemples de dépôt que vous suivez. -* A quels blogs êtes-vous abonné ? -* Quel logiciel de gestion de versions avez-vous déjà utilisé ? (Git, SVN etc.) -* Quel est votre environnement de développement préféré ? (OS, Editor, Browsers, Tools etc.) -* Pouvez-vous décrire votre workflow lorsque vous créez une page web ? -* Pouvez-vous décrire la différence entre amélioration progressive et dégradation progressive ? - * Un point bonus si vous décrivez des méthodes de détection -* Expliquez ce que le terme "HTML sémantique" signifie. -* Quel naviguateur et outils de débogage web utilisez-vous ? -* Comment optimisez vous les performances de vos page web (assets/resources) ? - * Énumérez quelques solutions comme : - * La concaténation des fichiers - * La minification des fichiers - * L'utilisation d'un Content Delivery Network (CDN) - * La mise en cache - * etc… + 1. [Contributeurs originaux](#contributors) + 1. [Questions générales](#general) + 1. [Questions sur HTML](#html) + 1. [Questions sur CSS](#css) + 1. [Questions sur JS](#js) + 1. [Questions sur jQuery](#jquery) + 1. [Questions sur la programmation](#jscode) + 1. [Questions pour le plaisir](#fun) + +####Contributeurs originaux: + +La majorité des questions sont tirées d'un sujet sur [oksoclap](http://oksoclap.com/) créé à l'origine par [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) et les personnes suivantes y ont contribué: + +* [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com +* [@cowboy](http://twitter.com/cowboy) - http://benalman.com +* [@ajpiano](http://ajpiano) - http://ajpiano.com +* [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com +* [@boazsender](http://twitter.com/boazsender) - http://boazsender.com +* [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com +* [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com +* [@gf3](http://twitter.com/gf3) - http://gf3.ca +* [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal +* [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com +* [@iansym](http://twitter.com/iansym) - http://twitter.com/iansym + +**[[⬆]](#toc)** + +####Questions générales: + +* Qu'avez-vous appris cette semaine ? +* Qu'est-ce qui vous motive ou vous intéresse dans le développement ? +* Parlez-moi de votre environnement de travail préféré. (OS, éditeur, navigateur, outils, etc.) +* Pouvez-vous décrire comment vous travaillez (votre workflow) lorsque vous créez une page web ? +* Pouvez-vous décrire la différence entre amélioration progressive et dégradation gracieuse ? + * Point bonus si description des méthodes de détection. +Expliquez ce que le terme «HTML sémantique» signifie. +* Comment optimisez-vous les performances de vos pages web (assets/resources) ? + * Parmi les solutions possibles : + * La concaténation des fichiers + * La minification des fichiers + * L'utilisation d'un Content Delivery Network (CDN) + * La mise en cache + * etc. * Pourquoi est-il préférable de disposer ses assets sur des domaines différents ? - * Combien de ressources différentes un navigateur peut télécharger à partir d'un même domaine à un instant T ? -* Donnez 3 façons qui permettent de réduire le temps de chargement d'une page. (perçu ou réel) + * Combien de ressources différentes à la fois un navigateur peut-il télécharger à partir d'un même domaine ? +* Donnez 3 façons qui permettent de réduire le temps de chargement d'une page (perçu ou réel). * Si vous démarrez sur un projet existant, que votre prédécesseur a utilisé des tabulations pour indenter son code et que vous utilisez des espaces, que faites-vous ? - * Vous proposez d'utiliser quelque chose comme EditorConfig (http://editorconfig.org) - * Vous restez fidèle aux conventions - * `issue :retab! command` -* Développez un simple slideshow - * Un point bonus si vous le faites sans JS -* Quel outils utilisez vous pour tester la performance de votre code ? - * JSPerf (http://jsperf.com/) - * Dromaeo (http://dromaeo.com/) - * etc… + * Vous proposez d'utiliser quelque chose comme EditorConfig (http://editorconfig.org) + * Vous restez fidèle aux conventions + * `issue :retab! command` +* Développez un simple diaporama + * Un point bonus si vous le faites sans JS +* Quels outils utilisez-vous pour tester la performance de votre code ? + * JSPerf (http://jsperf.com/) + * Dromaeo (http://dromaeo.com/) + * etc. * Si vous pouviez maitriser parfaitement une technologie cette année, laquelle serait-ce ? * Expliquez l'importance des standards et des organisations les édictant. +* Qu'est-ce que le FOUC, comment l'évitez-vous ? -## Questions spécifiques à HTML : +**[[⬆]](#toc)** -* Qu'est-ce qu'un `doctype` fait, et combien pouvez-vous en nommer ? -* Quelle est la différence entre les modes `standard` et `quirks` +####Questions sur HTML : + +* Que fait un `doctype` ? +* Quelle est la différence entre les modes `standard` et `quirks` ? * Quelles sont les limitations des pages XHTML ? - * Y a t'il des problèmes à envoyer des pages avec le content-type `application/xhtml+xml` ? -* Comment servez vous une page avec du contenu multilingue ? - * À quoi devez-vous faire attention quand vous designez ou développez des pages pour des sites multilingues ? -* Pouvez vous utliser une syntaxe XHTML en HTML5 ? -* Comment utilisez vous du XML en HTML5 ? -* À quoi servent les `data-` attributes ? -* Que sont les modèles de contenus en HTML4, et diffèrent-ils de HTML5 ? -* Si l'on considère que HTML5 est une plateforme web ouverte, quels sont les briques de base de HTML5 ? + * Y a t'il des problèmes à envoyer des pages avec le content-type `application/xhtml+xml` ? +* Comment servez-vous une page avec du contenu multilingue ? + * À quoi devez-vous faire attention quand vous désignez ou développez des pages pour des sites multilingues ? +* À quoi les `data-` "attributes" servent-ils ? +* Si l'on considère que HTML5 est une plateforme web ouverte, quelles sont les briques de base de HTML5 ? * Décrivez la différence entre cookies, sessionStorage, et localStorage. -## Questions spécifiques à JavaScript : -* Quelles sont les librairies JavaScript que vous avez utilisé ? -* En quoi JavaScript est-il différent de Java ? -* Qu'est-ce qu'une hashTable ? -* Que sont les variables `undefined` et `undeclared` ? -* Qu'est-ce qu'une closure, et pourquoi / comment en utiliseriez vous une ? - * Votre patten favori pour les créer ? (seulement pour les IIFEs, fonctions-expressions évoquées immédiatement) -* Quel est un cas d'utilisation typique pour une fonction anonyme ? -* Expliquer les pattern JavaScript de "Module", et quand vous l'utiliseriez. - * Un point bonus si vous parlez de namespacing - * Que se passe t'il si vos modules ne sont pas namespacés ? -* Comment organisez vous votre code (pattern modulaire, héritage classique ?) -* Quelle est la différence entre objets hôtes et objets natifs ? +**[[⬆]](#toc)** + +####Questions sur CSS : + +* Décrivez ce que fait un "reset" CSS et en quoi il est utile. +* Décrivez le positionnement flottant et comment cela fonctionne. +* Quelles sont les différentes méthodes de "clearing" des éléments flottant, et laquelle est appropriée pour chaque contexte ? +* Expliquez ce que sont les "sprites" CSS, et comment vous les implémenteriez sur une page ou un site. +* Quelles sont vos techniques favorites de remplacement d'images, et comment les utilisez-vous ? +* Parmi les solutions suivantes, laquelle préférez-vous ? Hacks CSS, appel de fichier CSS par commentaire conditionnel ou autre chose ? +* Comment servez-vous vos pages pour les navigateurs aux fonctionnalités réduites ? + * Quelles techniques/procédés utilisez-vous ? +* Quelles sont les différentes manières de masquer du contenu (en le laissant disponible pour les lecteurs d'écran) ? +* Avez-vous déjà utilisé un système de grille, et si oui, lequel préférez-vous ? +* Avez-vous déjà implémenté des "media queries", ou des "layouts CSS" spécifiques aux mobiles ? +* Avez-vous déjà touché au style d'un SVG ? +* Comment optimisez-vous vos pages pour l'impression (le print) ? +* Quelques astuces pour écrire du CSS efficacement ? +* Quels sont les avantages/désavantages de l'utilisation des préprocesseurs CSS ? (SASS, Compass, Stylus, LESS) + * Si vous avez un avis, décrivez ce que vous aimez et n'aimez pas des préprocesseurs que vous avez utilisés. +* Comment implémenteriez-vous un design qui utilise des polices non standards ? + * Webfonts (des services : Google Webfonts, Typekit, etc.) +* Expliquez comment un navigateur détermine quels éléments correspondent à quel sélecteur CSS. +* Expliquez ce que vous avez compris du modèle de boite et comment diriez-vous au navigateur, en CSS, de représenter votre mise en page avec des modèles de boite différents. + +**[[⬆]](#toc)** + +####Questions sur JS : + +* Expliquez la délégation d'évènement. +* Expliquez comment fonctionne `this` en Javascript. +* Expliquez comment fonctionne l'héritage de prototype. +* Comment vous en sortez-vous avec les tests en Javascript ? +* AMD ou CommonJS ? +* Qu'est-ce qu'une table de hachage (hashtable) ? +* Expliquez pourquoi ce qui suit n'est pas une IIFE (Immediately Invoked Function Expression) : `function foo(){ }();`. + * Qu'est-ce qu'il faut changer pour faire une IIFE correcte ? +* Quelle est la différence entre une variable `null`, `undefined` et `undeclared` ? + * Comment feriez-vous pour vérifier chacun de ces états ? +* Qu'est-ce qu'une "closure" et comment/pourquoi en utiliser une ? + * Point bonus pour avoir mentionné le nettoyage de l'espace de nom (namespace). + . Et si vos modules n'avaient pas d'espace de nom ? +* Comment organisez-vous votre code ? (pattern modulaire, héritage classique ?) +* Quelle est la différence entre des objets hôtes et des objets natifs ? * Différence entre : ```javascript -function Person(){} -var person = Person() // et -var person = new Person() +function Person(){} var person = Person() var person = new Person() ``` * Quelle est la différence entre `.call` et `.apply` ? * Expliquez `Function.prototype.bind` ? -* Quand optimisez-vous votre code ? -* Pouvez vous expliquer comment fonctionne l'héritage en JavaScript ? +* Comment optimisez-vous votre code ? +* Pouvez-vous expliquer comment fonctionne l'héritage en Javascript ? * Quand utiliseriez-vous `document.write()` ? * La plupart des pubs utilisent encore `document.write()` même si son utilisation est découragée. -* Quelle est la différence entre détection de feature, inférence de feature, et l'utilisation de l'User Agent ? -* Expliquez un call AJAX dans le plus grand détail possible -* Expliquez comment JSONP fonctionne (et en quoi ca n'est pas réellement de l'AJAX) -* Avez-vous déjà utilisé du templating en JavaScript ? - * Si oui, quelles librairies avez-vous utilisé (Mustache.js, Handlebars etc…) -* Expliquez "hoisiting". -* Quest-ce que le FOUC, comment l'évitez vous ? -* Décrivez le bubbling d'événement. -* Quelle est la différence entre un "attribut" et une "propriété" -* Pourquoi étendre les objets natifs JavaScript n'est pas une bonne idée ? -* Pourquoi étendre les objets natifs est une bonne idée ? -* Quelle est la différence entre les événements `load` et `ready` du document? -* Quelle est la différence entre `==` et `===` ? -* Expliquez comment vous récupéreriez un paramètre de querystring de l'URL du browser. -* Expliquez la politique d'origine commune et ses implication en JavaScript. -* Expliquez la délégation d'événement. +* Quelle est la différence entre détections de "feature", inférence de "feature" et l'utilisation du "User-Agent" ? +* Expliquez ce qu'est AJAX avec autant de détails que possible. +* Expliquez comment fonctionne JSONP (et pourquoi ce n'est pas réellement de l'AJAX). +* Avez-vous déjà utilisé fait du "templating" Javascript ? + * Si oui, quelles librairies avez-vous utilisées ? (Mustache.js, Handlebars, etc.) +* Expliquez le phénomène de "hoisting". +* Décrivez la phase de remontée d'un évènement. +* Quelle est la différence entre un "attribut" et une "propriété" ? +* Pourquoi étendre des objets natifs de Javascript n'est-il pas une bonne idée ? +* Pourquoi étendre les objets natifs est-il une bonne idée ? +* Quelle est la différence entre un les évènements "document load" et "document ready" ? +* Quelle la différence entre `==` et `===` ? +* Expliquez comment vous récupèreriez le paramètre d'une requête issu de l'URL de la fenêtre du navigateur ? +* Expliquez la politique d'origine commune et ses implications en JavaScript. * Expliquez les patterns d'héritage en JavaScript. * Faites fonctionner ceci : ```javascript [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] ``` -* Décrivez une stratégie de mémoization (pour éviter la répétition des calculs) en JavaScript. -* Qu'est-que qu'une instruction 'Ternaire', et qu'indique le mot 'Ternaire' +* Décrivez une stratégie de "memoization" (éviter la répétition de calculs) en Javascript. +* Pourquoi qualifierions-nous une expression de : ternaire ? Qu'est-ce que ce mot indique ? * Qu'est-ce que l'arité d'une fonction ? +* Qu'est-ce que `"use strict";`? Quels sont les avantages et désavantages de son utilisation ? -## Exemples de code JS +**[[⬆]](#toc)** + +####Questions sur jQuery : + +* Expliquez le chainage (chaining). +* Expliquez "deferred". +* Décrivez quelques optimisations spécifiques à jQuery que vous pouvez implémenter. +* Que fait `.end()` ? +* Pourquoi et comment restreindriez-vous un évènement à un espace de nom (namespace) ? +* Nommez 4 valeurs différentes que vous pouvez passer à une méthode jQuery. + * Sélecteur (string), HTML (string), Callback (function), HTMLElement, objet, tableau, tableau d'éléments, objet jQuery, etc. +* Qu'est-ce que la queue d'effets (fx queue) ? +* Quelle est la différence entre `.get()`, `[]`, et `.eq()` ? +* Quelle est la différence entre `.bind()`, `.live()`, et `.delegate()`? +* Quelle est la différence entre `$` et `$.fn`? Ou bien seulement : qu'est-ce que `$.fn`. +* Optimisez ce sélecteur : +```javascript +$(".foo div#bar:eq(0)") +``` +* Quelle est la différence entre `delegate()` and `live()` ? + +**[[⬆]](#toc)** + +####Questions sur la programmation : ```javascript ~~3.14 @@ -132,7 +207,7 @@ seulement si window.foo n'était pas défini ou faux, autrement il garde sa vale ```javascript var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); ``` -Question: Que se passe-t-il à l'éxécution de ce code ? +Question: Que se passe-t-il à l'exécution de ce code ? **Réponse: "Hello World" & ReferenceError: bar is not defined** ```javascript @@ -150,65 +225,13 @@ foo.bar = 'hello'; Question: Quelle est la valeur de foo.length ? **Réponse: `undefined` +**[[⬆]](#toc)** -## Questions spécifiques à jQuery : +####Questions pour le fun : -* Expliquez le chainage -* Expliquez 'deferred' -* Décrivez des optimisations spécifiques à jQuery que vous pouvez implémenter. -* Que fait `.end()` ? -* Pourquoi et comment restreindriez-vous un événement bindé à un un namespace ? -* Nommez 4 valeurs différentes que vous pouvez passer à la méthode jQuery. - * Sélecteur (string), HTML (string), Callback (function), HTMLElement, objet, tableau, tableau d'éléments, objet jQuery, etc… -* Qu'est-ce que la queue d'effets (fx queue) ? -* Quelle est la différence entre `.get()`, `[]`, et `.eq()` ? -* Quelle est la différence entre `.bind()`, `.live()`, et `.delegate()`? -* Quelle est la différence entre `$` et `$.fn`? Ou bien seulement : qu'est-ce que `$.fn`. -* Optimisez ce sélecteur : -```javascript -$(".foo div#bar:eq(0)") -``` - -## Questions spécifiques CSS : - -* Décrivez ce que fait un fichier CSS Reset, et pourquoi il est utile. -* Décrivez les Floats, et comment ils fonctionnent. -* Quelles sont les différentes méthodes de clearing des floats, et laquelle est appropriée pour chaque contexte ? -* Expliquez les sprites CSS, et comment vous les implémenteriez sur une page ou un site. -* Quelles sont vos techniques favorites de remplacement d'images, et comment les utilisez vous ? -* hacks de propriétés CSS, fichiers .css inclus avec des commentaires conditionnels, ou autre ? -* Comment servez vous vos pages pour les browsers aux fonctionnalités réduites ? - * Quelles techniques / process utilisez vous ? -* Quelles sont les différentes manières de masquer du contenu (en le laissant disponible pour les lecteurs d'écran) ? -* Avez-vous déjà utilisé un grid system, et si oui, lequel préférez-vous ? -* Avez-vous déjà implémenté des media queries, ou des layouts/CSS spécifiques aux mobiles ? -* déjà touché au styling de SVG ? -* Comment optimisez vous vos pages pour le print ? -* Quelques trucs pour écrire du CSS efficace ? -* Utilisez vous des préprocesseurs CSS ? (SASS, Compass, Stylus, LESS) - * Si oui, décrivez ce que vous aimez et n'aimez pas des préprocesseurs que vous avez utilisé. -* Comment implémenteriez-vous une créa web qui utilise des typos non standard ? - * Webfonts (services comme: Google Webfonts, Typekit etc.) -* Expliquez comment un browser détermine ce qui matche un sélecteur CSS. - - - -## Questions optionnelles, pour le geste. - -* Quel est le tuc le plus cool que vous ayez jamais codé, de quoi êtes-vous le plus fier ? -* Connaissez vous le signe de gang du HTML5 ? -* Êtes-vous ou avez-vous déjà été sur un bateau ? -* Quelles sont vos parties favorites des outils de développement que vous utilisez. +* Quel est le truc le plus cool que vous ayez programmé, de quoi êtes-vous le plus fier ? +* Quelles sont vos parties favorites des outils de développement que vous utilisez ? * Avez-vous des projets chouchous ? Quel genre ? -* Expliquez 'cornify'. -* Sur un bout de papier, écrivez les lettres A B C D E verticalement. - Maintenant mettez les en ordre descendant sans écrire une ligne de code. - * Regardez si ils retournent le bout de papier. -* Pirate ou Ninja. - * Bonus si c'est une doublette, et si il y a une bonne raison. (+2 pour des Zombies Singes Ninja Pirates) -* Si c'était pas du Dev, vous feriez quoi ? -* Ou est Carmen San Diego ? - * Indice : La réponse est toujours fausse. -* Quelle est votre feature favorite de IE ? -* Complétez cette phrase Brendan Eich et Doug Crockford sont les __________ de JavaScript. -* jQuery : superbe librairie, ou la meilleure ? Discutez. +* Quelle est votre fonctionnalité favorite de IE ? + +**[[⬆]](#toc)**