Merge branch 'master' into translations/burmese
This commit is contained in:
mmhan
commit
be27a4e752
52
README.md
52
README.md
|
|
@ -10,6 +10,8 @@ This file contains a number of front-end interview questions that can be used wh
|
|||
1. [HTML Questions](#html-questions)
|
||||
1. [CSS Questions](#css-questions)
|
||||
1. [JS Questions](#js-questions)
|
||||
1. [Testing Questions](#testing-questions)
|
||||
1. [Performance Questions](#performance-questions)
|
||||
1. [Network Questions](#network-questions)
|
||||
1. [Coding Questions](#coding-questions)
|
||||
1. [Fun Questions](#fun-questions)
|
||||
|
|
@ -37,12 +39,12 @@ This file contains a number of front-end interview questions that can be used wh
|
|||
* Name 3 ways to decrease page load (perceived or actual load time).
|
||||
* If you jumped on a project and they used tabs and you used spaces, what would you do?
|
||||
* Describe how you would create a simple slideshow page.
|
||||
* What tools do you use to test your code's performance?
|
||||
* If you could master one technology this year, what would it be?
|
||||
* Explain the importance of standards and standards bodies.
|
||||
* What is Flash of Unstyled Content? How do you avoid FOUC?
|
||||
* Explain what ARIA and screenreaders are, and how to make a website accessible.
|
||||
* Explain some of the pros and cons for CSS animations versus JavaScript animations.
|
||||
* What does CORS stand for and what issue does it address?
|
||||
|
||||
#### HTML Questions:
|
||||
|
||||
|
|
@ -57,6 +59,8 @@ This file contains a number of front-end interview questions that can be used wh
|
|||
* Describe the difference between a `cookie`, `sessionStorage` and `localStorage`.
|
||||
* Describe the difference between `<script>`, `<script async>` and `<script defer>`.
|
||||
* Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`? Do you know any exceptions?
|
||||
* What is progressive rendering?
|
||||
* Have you used different HTML templating languages before?
|
||||
|
||||
#### CSS Questions:
|
||||
|
||||
|
|
@ -64,6 +68,7 @@ This file contains a number of front-end interview questions that can be used wh
|
|||
* What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
|
||||
* Describe Floats and how they work.
|
||||
* Describe z-index and how stacking context is formed.
|
||||
* Describe BFC(Block Formatting Context) and how it works.
|
||||
* What are the various clearing techniques and which is appropriate for what context?
|
||||
* Explain CSS sprites, and how you would implement them on a page or site.
|
||||
* What are your favourite image replacement techniques and which do you use when?
|
||||
|
|
@ -73,13 +78,14 @@ This file contains a number of front-end interview questions that can be used wh
|
|||
* What are the different ways to visually hide content (and make it available only for screen readers)?
|
||||
* Have you ever used a grid system, and if so, what do you prefer?
|
||||
* Have you used or implemented media queries or mobile specific layouts/CSS?
|
||||
* Any familiarity with styling SVG?
|
||||
* Are you familiar with styling SVG?
|
||||
* How do you optimize your webpages for print?
|
||||
* What are some of the "gotchas" for writing efficient CSS?
|
||||
* What are the advantages/disadvantages of using CSS preprocessors?
|
||||
* Describe what you like and dislike about the CSS preprocessors you have used.
|
||||
* How would you implement a web design comp that uses non-standard fonts?
|
||||
* Explain how a browser determines what elements match a CSS selector.
|
||||
* Describe pseudo-elements and discuss what they are used for.
|
||||
* Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
|
||||
* What does ```* { box-sizing: border-box; }``` do? What are its advantages?
|
||||
* List as many values for the display property that you can remember.
|
||||
|
|
@ -97,11 +103,10 @@ This file contains a number of front-end interview questions that can be used wh
|
|||
* Explain event delegation
|
||||
* Explain how `this` works in JavaScript
|
||||
* Explain how prototypal inheritance works
|
||||
* How do you go about testing your JavaScript?
|
||||
* What do you think of AMD vs CommonJS?
|
||||
* Explain why the following doesn't work as an IIFE: `function foo(){ }();`.
|
||||
* What needs to be changed to properly make it an IIFE?
|
||||
* What's the difference between a variable that is: `null`, `undefined` or `undeclared`?
|
||||
* What's the difference between a variable that is: `null`, `undefined` or undeclared?
|
||||
* How would you go about checking for any of these states?
|
||||
* What is a closure, and how/why would you use one?
|
||||
* What's a typical use case for anonymous functions?
|
||||
|
|
@ -119,7 +124,7 @@ This file contains a number of front-end interview questions that can be used wh
|
|||
* Explain "hoisting".
|
||||
* Describe event bubbling.
|
||||
* What's the difference between an "attribute" and a "property"?
|
||||
* Why is extending built in JavaScript objects not a good idea?
|
||||
* Why is extending built-in JavaScript objects not a good idea?
|
||||
* Difference between document load event and document ready event?
|
||||
* What is the difference between `==` and `===`?
|
||||
* Explain the same-origin policy with regards to JavaScript.
|
||||
|
|
@ -129,11 +134,32 @@ duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
|
|||
```
|
||||
* Why is it called a Ternary expression, what does the word "Ternary" indicate?
|
||||
* What is `"use strict";`? what are the advantages and disadvantages to using it?
|
||||
* Create a for loop that iterates up to `100` while outputting **"fizz"** at multiples of `3`, `"buzz"` at multiples of `5` and **"fizzbuzz"** at multiples of `3` and `5`
|
||||
* Create a for loop that iterates up to `100` while outputting **"fizz"** at multiples of `3`, **"buzz"** at multiples of `5` and **"fizzbuzz"** at multiples of `3` and `5`
|
||||
* Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?
|
||||
* Why would you use something like the `load` event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?
|
||||
* Explain what a single page app is and how to make one SEO-friendly.
|
||||
* What is the extent of your experience with Promises and/or their polyfills?
|
||||
* What are the pros and cons of using Promises instead of callbacks?
|
||||
* What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
|
||||
* What tools and techniques do you use debugging JavaScript code?
|
||||
* What language constructions do you use for iterating over object properties and array items?
|
||||
* Explain the difference between mutable and immutable objects.
|
||||
* What is an example of an immutable object in JavaScript?
|
||||
* What are the pros and cons of immutability?
|
||||
* How can you achieve immutability in your own code?
|
||||
|
||||
#### Testing Questions:
|
||||
|
||||
* What are some advantages/disadvantages to testing your code?
|
||||
* What tools would you use to test your code's functionality?
|
||||
* What is the difference between a unit test and a functional/integration test?
|
||||
* What is the purpose of a code style linting tool?
|
||||
|
||||
#### Performance Questions:
|
||||
|
||||
* What tools would you use to find a performance bug in your code?
|
||||
* What are some ways you may improve your website's scrolling performance?
|
||||
* Explain the difference between layout, painting and compositing.
|
||||
|
||||
#### Network Questions:
|
||||
|
||||
|
|
@ -147,8 +173,7 @@ duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
|
|||
* Transfer-Encoding
|
||||
* ETag
|
||||
* X-Frame-Options
|
||||
* Can you explain the difference between `GET` and `POST`?
|
||||
* Can you explain the difference between `GET` and `HEAD`?
|
||||
* What are HTTP actions? List all HTTP actions that you know, and explain them.
|
||||
|
||||
#### Coding Questions:
|
||||
|
||||
|
|
@ -190,6 +215,13 @@ foo.push(1);
|
|||
foo.push(2);
|
||||
```
|
||||
|
||||
*Question: What is the value of `foo.x`?*
|
||||
```javascript
|
||||
var foo = {n: 1};
|
||||
var bar = foo;
|
||||
foo.x = foo = {n: 2};
|
||||
```
|
||||
|
||||
#### Fun Questions:
|
||||
|
||||
* What's a cool project that you've recently worked on?
|
||||
|
|
@ -201,6 +233,6 @@ foo.push(2);
|
|||
|
||||
#### Contributors:
|
||||
|
||||
This document started in 2009 as a collaboration of [@paul_irish](http://twitter.com/paul_irish) [@bentruyman](http://twitter.com/bentruyman) [@cowboy](http://twitter.com/cowboy) [@ajpiano](http://twitter.com/ajpiano) [@SlexAxton](http://twitter.com/slexaxton) [@boazsender](http://twitter.com/boazsender) [@miketaylr](http://twitter.com/miketaylr) [@vladikoff](http://twitter.com/vladikoff) [@gf3](http://twitter.com/gf3) [@jon_neal](http://twitter.com/jon_neal) [@sambreed](http://twitter.com/sambreed) and [@iansym](http://twitter.com/iansym).
|
||||
This document started in 2009 as a collaboration of [@paul_irish](https://twitter.com/paul_irish) [@bentruyman](https://twitter.com/bentruyman) [@cowboy](https://twitter.com/cowboy) [@ajpiano](https://twitter.com/ajpiano) [@SlexAxton](https://twitter.com/slexaxton) [@boazsender](https://twitter.com/boazsender) [@miketaylr](https://twitter.com/miketaylr) [@vladikoff](https://twitter.com/vladikoff) [@gf3](https://twitter.com/gf3) [@jon_neal](https://twitter.com/jon_neal) [@sambreed](https://twitter.com/sambreed) and [@iansym](https://twitter.com/iansym).
|
||||
|
||||
It has since received contributions from [100 developers](https://github.com/h5bp/Front-end-Developer-Interview-Questions/graphs/contributors).
|
||||
It has since received contributions from over [100 developers](https://github.com/h5bp/Front-end-Developer-Interview-Questions/graphs/contributors).
|
||||
|
|
|
|||
|
|
@ -2,97 +2,79 @@
|
|||
|
||||
Cette liste contient un certain nombre de questions que vous pouvez poser lors d'un entretien d'embauche pour un développeur Front-End. Il n'est en aucun cas recommandé de poser toutes ces questions à un candidat (ça prendrait des heures). Choisissez en quelques-unes liées au profil que vous rechercher afin de vérifier les compétences dont vous avez besoin.
|
||||
|
||||
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 se lancer dans un entretien.
|
||||
|
||||
**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.
|
||||
|
||||
## <a name='toc'>Table des matières</a>
|
||||
|
||||
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)
|
||||
1. [Questions générales](#general-questions)
|
||||
1. [Questions sur HTML](#html-questions)
|
||||
1. [Questions sur CSS](#css-questions)
|
||||
1. [Questions sur JS](#js-questions)
|
||||
1. [Questions sur réseau](#network-questions)
|
||||
1. [Questions sur la programmation](#code-questions)
|
||||
1. [Questions pour le fun](#fun-questions)
|
||||
|
||||
####<a name='contributors'>Contributeurs originaux:</a>
|
||||
####S'impliquer :
|
||||
|
||||
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
|
||||
1. [Contributeurs](#contributors)
|
||||
1. [Comment contribuer (en)](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/CONTRIBUTING.md)
|
||||
1. [Licence](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/LICENSE.md)
|
||||
|
||||
**[[⬆]](#toc)**
|
||||
|
||||
####<a name='general'>Questions générales:</a>
|
||||
####<a name='general-questions'>Questions générales:</a>
|
||||
|
||||
* 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.)
|
||||
* Quel a été le dernier défi technique que vous avez expérimenté et comment l'avez-vous résolu ?
|
||||
* Quelles considérations en terme d'UI, Sécurité, Performance, SEO, Maintenabilité ou Technologie faites-vous lorsque vous concevez une application web ou site ?
|
||||
* Parlez-moi de votre environnement de travail préféré.
|
||||
* Avec quels logiciels de gestion de versions êtes vous familier?
|
||||
* Pouvez-vous décrire comment vous travaillez (votre workflow) lorsque vous créez une page web ?
|
||||
* Avec quels logiciels de gestion de versions êtes vous familier?
|
||||
* Si vous aviez 5 feuilles de style différentes, de quel façon les intgreriez-vous le mieux dans un site ?
|
||||
* 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 à la fois un navigateur peut-il télécharger à partir d'un même domaine ?
|
||||
* Combien de ressources différentes à la fois un navigateur peut-il télécharger à partir d'un même domaine ?
|
||||
* Quelles sont les exceptions ?
|
||||
* Donnez 3 façons qui permettent de réduire le temps de chargement d'une page (perçu ou réel).
|
||||
* Si vous commencer à travailler sur un projet existant, où 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 diaporama
|
||||
* Un point bonus si vous le faites sans JS
|
||||
* Décrivez comment vous développeriez un simple diaporama
|
||||
* Quels outils utilisez-vous pour tester la performance de votre code ?
|
||||
* JSPerf (http://jsperf.com/)
|
||||
* Dromaeo (http://dromaeo.com/)
|
||||
* etc.
|
||||
* Si vous pouviez maîtriser parfaitement une technologie cette année, laquelle serait t'elle ?
|
||||
* Expliquez l'importance des standards et des organisations les édictant.
|
||||
* Qu'est-ce que le FOUC, comment l'évitez-vous ?
|
||||
* Expliquez qu'est-ce que sont ARIA et les lecteurs d'écrans, et comment rendre votre site internet accessible
|
||||
* Expliquez quelques-uns des pour et contre des animations CSS par rapport aux animations JavaScript
|
||||
|
||||
**[[⬆]](#toc)**
|
||||
|
||||
####<a name='html'>Questions sur HTML :</a>
|
||||
####<a name='html-questions'>Questions sur HTML :</a>
|
||||
|
||||
* 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` ?
|
||||
* Quelles sont les différences entre HTML et 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 désignez ou développez des pages pour des sites multilingues ?
|
||||
* À 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.
|
||||
* Décrivez la différence entre `cookie`, `sessionStorage`, et `localStorage`.
|
||||
* Décrivez la différence entre `<script>`, `<script async>` et `<script defer>`.
|
||||
* Pourquoi est-ce-t'il généralement une bonne idée de positionner `<link>`s à l'intérieur de `<head></head>` et `<script>`s juste avant `</body>`? Connaissez-vous des exceptions?
|
||||
* Qu'est-ce que le rendu progressif ?
|
||||
|
||||
**[[⬆]](#toc)**
|
||||
|
||||
####<a name='css'>Questions sur CSS :</a>
|
||||
####<a name='css-questions'>Questions sur CSS :</a>
|
||||
|
||||
* Décrivez ce que fait un "reset" CSS et en quoi il est utile.
|
||||
* Quelle est la différence entre les classes et les IDs en CSS ?
|
||||
* Quelle est la différence entre un "reset" et une "normalisation" en CSS ? Lequel choisiriez-vous et pourquoi ?
|
||||
* Décrivez le positionnement flottant et son fonctionnement.
|
||||
* Décrivez le `z-index` et comment le contexte d'empilement se forme ?
|
||||
* 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 ?
|
||||
* Quelle approche choisiriez-vous pour réparer des bugs au niveau du CSS spécifique à certains navigateurs ?
|
||||
* 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) ?
|
||||
|
|
@ -104,27 +86,34 @@ Expliquez ce que le terme «HTML sémantique» signifie.
|
|||
* 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é.
|
||||
* Comment implémenteriez-vous un design qui utilise des polices de caractères non standards ?
|
||||
* Webfonts (des services : Google Webfonts, Typekit, etc.)
|
||||
* Expliquez comment un navigateur détermine quels éléments correspondent à un sélecteur CSS.
|
||||
* Expliquez ce que vous avez compris du modèle de boite (box model) et comment implémenteriez vous une mise en page avec des modèles de boite différents.
|
||||
* Qu'est-ce que ```* { box-sizing: border-box; }``` fait ? Quels sont ses désavantages ?
|
||||
* Listez autant de valeurs que vous pouvez pour la propriété `display`.
|
||||
* Quelle est la différence entre `inline` et `inline-block` ?
|
||||
* Quelle est la différence entre les éléments ayant `relative`, `fixed`, `absolute` et `static` comme `position` ?
|
||||
* Le 'C' dans CSS veut dire Cascade (Cascading). Comment la priorité est-elle définie lors de l'assignement de styles (exemples) ? Comment pouvez-vous utiliser ce système à votre avantage ?
|
||||
* Quels systèmes CSS (framework) avez-vous utilisé localement, ou en production ? Comment feriez-vous pour les changer/améliorer ?
|
||||
* Avez-vous expérimenté le récent `flexbox` ?
|
||||
* En quoi le "responsive design" est différent du "adaptive design" ?
|
||||
* Avez-vous déjà travaillé avec des images "retina" ? Si oui, à quel moment et quelles techniques avez-vous utilisé ?
|
||||
* Il y a t'il des raisons particulières pour lesquelles vous voudriez utilser `translate()` plutôt que `position: absolute` ou vice-versa ? Et pourquoi ?
|
||||
|
||||
**[[⬆]](#toc)**
|
||||
|
||||
####<a name='js'>Questions sur JS :</a>
|
||||
####<a name='js-questions'>Questions sur JS :</a>
|
||||
|
||||
* Expliquez la délégation d'évènement.
|
||||
* Expliquez comment fonctionne `this` en Javascript.
|
||||
* Expliquez comment fonctionne l'héritage de prototype.
|
||||
* Comment testez-vous votre code Javascript ?
|
||||
* AMD ou CommonJS ?
|
||||
* Qu'est-ce qu'une table de hachage (hashtable) ?
|
||||
* Que pensez-vous d'AMD par rapport à CommonJS ?
|
||||
* 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 ?
|
||||
* Quelle est l'utilisation typique d'une fonction anonyme ?
|
||||
* 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 :
|
||||
|
|
@ -136,12 +125,11 @@ function Person(){} var person = Person() var person = new Person()
|
|||
* 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 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é des "templates" en Javascript ?
|
||||
* Si oui, quelles librairies avez-vous utilisées ? (Mustache.js, Handlebars, etc.)
|
||||
* Si oui, quelles librairies avez-vous utilisées ?
|
||||
* Expliquez le phénomène de "hoisting".
|
||||
* Décrivez le "event bubbling".
|
||||
* Quelle est la différence entre un "attribut" et une "propriété" ?
|
||||
|
|
@ -149,90 +137,93 @@ function Person(){} var person = Person() var person = new Person()
|
|||
* Pourquoi étendre les objets natifs est-il une bonne idée ?
|
||||
* Quelle est la différence entre 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 (same-origin policy) 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 "memoization" (éviter la répétition de calculs) en Javascript.
|
||||
* Qu'est ce que l'opérateur 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 ?
|
||||
* Créez une boucle `for` qui se répète `100` fois et affichez **"fizz"** aux multiples de `3`, `"buzz"` aux multiples de `5` et **"fizzbuzz"** aux multiples de `3` et `5`.
|
||||
* Pourquoi il est en général préférable de laissez le 'scope' global d'un site tel quel et ne jamais y toucher ?
|
||||
* Pourquoi utiliseriez-vous quelque chose comme l'événement `load` ? Est-ce que cette événement a des avantages ? Connaissez-vous des alternatives, et pourquoi les utiliseriez-vous ?
|
||||
* Expliquez ce qu'est une application à 1 page et comment feriez pour qu'elle soit optimisé pour le SEO.
|
||||
* Quelle est l'étendu de votre expérience avec les "Promises" et/ou leurs "polyfills" ?
|
||||
* Quels sont les pour et contre de l'utilisation des "Promises" à la place des "callbacks" ?
|
||||
|
||||
**[[⬆]](#toc)**
|
||||
|
||||
####<a name='jquery'>Questions sur jQuery :</a>
|
||||
####<a name="network-questions">Questions sur le réseau</a>
|
||||
|
||||
* Expliquez le chaînage (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()` ?
|
||||
* Pourquoi est-il préférable de disposer ses assets sur des domaines différents ?
|
||||
* Faites de votre mieux pour décrire le processus à partir du moment où vous tapez l'URL d'un site internet jusqu'au moment où la page a finit de charger.
|
||||
* Quelle est la différence entre "Long-Polling", "Websockets" et les événements "Server-Sent" ?
|
||||
* Expliquez les entêtes de requêtes et réponses suivant :
|
||||
* Différences entre Expires, Date, Age and If-Modified-...
|
||||
* Do Not Track
|
||||
* Cache-Control
|
||||
* Transfer-Encoding
|
||||
* ETag
|
||||
* X-Frame-Options
|
||||
* Quelles sont les différentes actions HTTP ? Listez toutes celles que vous connaissez et expliquez les.
|
||||
|
||||
**[[⬆]](#toc)**
|
||||
|
||||
####<a name='jscode'>Questions sur la programmation :</a>
|
||||
####<a name='code-questions'>Questions sur la programmation :</a>
|
||||
|
||||
*Question: Quelle est la valeur de `foo` ?*
|
||||
```javascript
|
||||
~~3.14
|
||||
var foo = 10 + '20';
|
||||
```
|
||||
Question: Que retourne ce code ?
|
||||
**Réponse: 3**
|
||||
|
||||
*Question: Comment feriez-vous marcher ceci?*
|
||||
```javascript
|
||||
add(2, 5); // 7
|
||||
add(2)(5); // 7
|
||||
```
|
||||
|
||||
*Question: Que retourne ce code ?*
|
||||
```javascript
|
||||
"je suis un bouffeur de lasagne".split("").reverse().join("");
|
||||
```
|
||||
Question: Que retourne ce code ?
|
||||
**Réponse: "engasal ed rueffuob nu sius ej"**
|
||||
|
||||
*Question: Que retourne window.foo?*
|
||||
```javascript
|
||||
( window.foo || ( window.foo = "bar" ) );
|
||||
```
|
||||
Question: Que retourne window.foo?
|
||||
**Réponse: "bar"**
|
||||
seulement si window.foo n'était pas défini ou faux, autrement il garde sa valeur
|
||||
|
||||
*Question: Qu'est ce qu'affiche les deux alertes ci-dessous ?*
|
||||
```javascript
|
||||
var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);
|
||||
var foo = "Hello";
|
||||
(function() {
|
||||
var bar = " World";
|
||||
alert(foo + bar);
|
||||
})();
|
||||
alert(foo + bar);
|
||||
```
|
||||
Question: Que se passe-t-il à l'exécution de ce code ?
|
||||
**Réponse: "Hello World" & ReferenceError: bar is not defined**
|
||||
|
||||
*Question: Quelle est la valeur de `foo.length` ?*
|
||||
```javascript
|
||||
var foo = [];
|
||||
foo.push(1);
|
||||
foo.push(2);
|
||||
```
|
||||
Question: Quelle est la valeur de foo.length ?
|
||||
**Réponse: `2`**
|
||||
|
||||
```javascript
|
||||
var foo = {};
|
||||
foo.bar = 'hello';
|
||||
```
|
||||
Question: Quelle est la valeur de foo.length ?
|
||||
**Réponse: `undefined`**
|
||||
|
||||
**[[⬆]](#toc)**
|
||||
|
||||
####<a name='fun'>Questions pour le fun :</a>
|
||||
####<a name='fun-questions'>Questions pour le fun :</a>
|
||||
|
||||
* Quel est le truc le plus cool que vous ayez programmé, de quoi êtes-vous le plus fier ?
|
||||
* Quelles sont les parties favorites des outils de développement que vous utilisez ?
|
||||
* Avez-vous des projets chouchous ? Quel genre ?
|
||||
* Quelle est votre fonctionnalité favorite dans IE ?
|
||||
* Comment voulez-vous votre café ?
|
||||
|
||||
**[[⬆]](#toc)**
|
||||
|
||||
####<a name="contributors">Contributeurs :</a>
|
||||
|
||||
Ce document a démarré avec la collaboration de [@paul_irish](https://twitter.com/paul_irish) [@bentruyman](https://twitter.com/bentruyman) [@cowboy](https://twitter.com/cowboy) [@ajpiano](https://twitter.com/ajpiano) [@SlexAxton](https://twitter.com/slexaxton) [@boazsender](https://twitter.com/boazsender) [@miketaylr](https://twitter.com/miketaylr) [@vladikoff](https://twitter.com/vladikoff) [@gf3](https://twitter.com/gf3) [@jon_neal](https://twitter.com/jon_neal) [@sambreed](https://twitter.com/sambreed) et [@iansym](https://twitter.com/iansym).
|
||||
|
||||
Il a depuis reçu des contributions de plus de [100 développeurs](https://github.com/h5bp/Front-end-Developer-Interview-Questions/graphs/contributors).
|
||||
|
|
@ -1,179 +1,208 @@
|
|||
#Front-end Job Interview Questions
|
||||
#Dafter Pertanyaan Wawancara Kerja Front-End
|
||||
|
||||
File ini berisi sejumlah pertanyaan wawancara kerja yang dapat digunakan saat pemeriksaan calon potensial. Namun Hal ini tidak berarti dianjurkan untuk menggunakan setiap pertanyaan tunggal di sini pada calon yang sama (yang akan memakan waktu beberapa jam). Memilih beberapa item dari daftar ini akan membantu Anda dokter hewan keterampilan dimaksudkan Anda butuhkan.
|
||||
File ini berisi sejumlah pertanyaan teknis yang dapat digunakan saat mewawancarai calon pekerja. Namun, bukan berarti anda dianjurkan untuk bertanya kepada si calon pekerja dengan semua pertanyaan dari daftar di bawah ini (karena itu akan memakan waktu beberapa jam). Dengan cukup memilih beberapa pertanyaan dari daftar ini akan membantu anda mengenal kemampuan yang anda cari dari si calon pekerja.
|
||||
|
||||
**Catatan:** Perlu diingat bahwa banyak dari pertanyaan-pertanyaan ini terbuka dan dapat menyebabkan diskusi menarik yang memberitahu lebih lanjut tentang kemampuan seseorang dari jawaban langsung akan.
|
||||
**Catatan:** Perlu diingat bahwa kebanyakan pertanyaan-pertanyaan ini bersifat terbuka dan mungkin dapat mengarah menjadi diskusi menarik yang bisa memberikan gambaran lebih lanjut mengenai kemampuan seseorang.
|
||||
|
||||
## Daftar Isi
|
||||
|
||||
1. [Pertanyaan dasar](#pertanyaan-dasar)
|
||||
1. [Pertanyaan Umum](#pertanyaan-umum)
|
||||
1. [Pertanyaan HTML](#pertanyaan-html)
|
||||
1. [Pertanyaan CSS](#pertanyaan-css)
|
||||
1. [Pertanyaan JS](#Pertanyaan-js)
|
||||
1. [jQuery Questions](#jquery-questions)
|
||||
1. [Pertanyaan Coding](#Pertanyaan-coding)
|
||||
1. [Pertanyaan-seru](#Pertanyaan-seru)
|
||||
1. [Pertanyaan JS](#pertanyaan-js)
|
||||
1. [Pertanyaan Pengujian](#pertanyaan-pengujian)
|
||||
1. [Pertanyaan Kinerja](#pertanyaan-kinerja)
|
||||
1. [Pertanyaan Jaringan](#pertanyaan-jaringan)
|
||||
1. [Pertanyaan Koding](#pertanyaan-koding)
|
||||
1. [Pertanyaan Seru / Sampingan](#pertanyaan-seru-sampingan)
|
||||
|
||||
|
||||
## Pranala
|
||||
## Cara Partisipasi
|
||||
|
||||
1. [Original Contributors](#original-contributors)
|
||||
1. [Recent Contributors](https://github.com/h5bp/Front-end-Developer-Interview-Questions/graphs/contributors)
|
||||
1. [How to Contribute](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/CONTRIBUTING.md)
|
||||
1. [License](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/LICENSE.md)
|
||||
1. [Kontributor](#contributors)
|
||||
1. [Cara Kontribusi](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/CONTRIBUTING.md)
|
||||
1. [Lisensi](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/LICENSE.md)
|
||||
|
||||
#### Pertanyaan Dasar:
|
||||
#### Pertanyaan Umum:
|
||||
|
||||
* Apa yang Anda pelajari kemarin / minggu ini?
|
||||
* Apa menggairahkan atau kepentingan Anda tentang coding?
|
||||
* Apa tantangan teknis baru-baru ini yang Anda alami dan bagaimana Anda mengatasinya?
|
||||
* Apa UI, Keamanan, Kinerja, SEO, Maintainability atau Teknologi pertimbangan Anda membuat sambil membangun aplikasi web atau situs?
|
||||
* Bicara tentang lingkungan pengembangan pilihan Anda. (OS, Editor atau IDE, Browser, Tools, dll)
|
||||
* Yang sistem kontrol versi yang Anda kenal?
|
||||
* Dapatkah Anda menjelaskan alur kerja Anda ketika Anda membuat halaman web?
|
||||
* Jika Anda memiliki 5 stylesheet yang berbeda, bagaimana Anda terbaik mengintegrasikan mereka ke situs ini?
|
||||
* Dapatkah Anda menjelaskan perbedaan antara peningkatan progresif dan degradasi anggun?
|
||||
* Bagaimana Anda akan mengoptimalkan sebuah website aset / sumber daya?
|
||||
* Secara tradisional, mengapa itu lebih baik untuk melayani aset situs dari beberapa domain?
|
||||
* Berapa banyak sumber daya akan download browser dari domain yang diberikan pada suatu waktu?
|
||||
* Apa pengecualian?
|
||||
* Nama 3 cara untuk mengurangi beban halaman (dirasakan atau waktu buka yang sebenarnya).
|
||||
* Jika Anda melompat pada sebuah proyek dan mereka menggunakan tab dan Anda menggunakan ruang, apa yang akan Anda lakukan?
|
||||
* Tulis slideshow halaman sederhana
|
||||
* Alat apa yang Anda gunakan untuk menguji kinerja kode Anda?
|
||||
* Jika Anda bisa menguasai satu teknologi tahun ini, apakah itu?
|
||||
* Apa perbedaan antara panjang-Polling, Websockets dan SSE?
|
||||
* Apa yang baru Anda pelajari kemarin / minggu ini?
|
||||
* Apa yang membuatmu tertarik dengan coding?
|
||||
* Tantangan teknis apa yang baru-baru ini Anda hadapi, dan bagaimana Anda mengatasinya?
|
||||
* Pertimbangan-pertimbangan apa yang Anda ambil dari sisi UI, Keamanan, Kinerja, SEO, Maintainability maupun Teknologi saat Anda membangun aplikasi web atau situs?
|
||||
* Jelaskan tentang lingkungan coding yang Anda sukai. (OS, Editor atau IDE, Browser, Tools, dll)
|
||||
* Sistem kontrol versi apa saja yang Anda kenali?
|
||||
* Dapatkah Anda menjelaskan alur kerja Anda ketika Anda membuat sebuah situs?
|
||||
* Katakan Anda memiliki 5 stylesheet yang berbeda, bagaimana cara terbaik untuk mengintegrasikannya ke situs Anda?
|
||||
* Dapatkah Anda menjelaskan perbedaan antara _progressive enhancement_ dan _graceful degradation_?
|
||||
* Bagaimana Anda mengoptimalkan aset / resource sebuah website?
|
||||
* Berapa banyak _resource_ yang didownload oleh browser dari domain pada suatu waktu?
|
||||
* Apa saja pengecualiannya?
|
||||
* Sebutkan 3 cara untuk mengurangi beban halaman (waktu yang dirasakan maupun waktu loading yang sebenarnya).
|
||||
* Jika Anda mendapatkan sebuah proyek, dan dalam proyek ini mereka menggunakan _tab_ dan Anda menggunakan _space_, apa yang akan Anda lakukan?
|
||||
* Jelaskan bagaimana Anda membuat halaman slideshow sederhana.
|
||||
* Jika Anda bisa mempelajari satu teknologi tahun ini, apakah itu?
|
||||
* Jelaskan pentingnya standar dan badan-badan standar.
|
||||
* Apa FOUC? Bagaimana Anda menghindari FOUC?
|
||||
* Lakukan yang terbaik untuk menggambarkan proses dari saat Anda mengetikkan URL situs web untuk itu menyelesaikan loading pada layar Anda.
|
||||
* Jelaskan apa ARIA dan screenreaders, dan bagaimana membuat sebuah website dapat diakses.
|
||||
* Jelaskan beberapa pro dan kontra untuk animasi CSS dibandingkan animasi JavaScript
|
||||
* Jelaskan permintaan dan respon header berikut:
|
||||
* Diff. antara Expires, Date, Age dan If-Modified-...
|
||||
* DNT
|
||||
* Cache-Control
|
||||
* Transfer-Encoding
|
||||
* ETag
|
||||
* X-Frame-Options
|
||||
* Apa itu _Flash of Unstyled Content_ alias FOUC? Bagaimana Anda menghindari FOUC?
|
||||
* Jelaskan apa itu ARIA dan _screenreader_, dan bagaimana membuat sebuah website dapat diakses.
|
||||
* Jelaskan beberapa pro dan kontra animasi CSS dibandingkan animasi JavaScript.
|
||||
* Apa arti CORS dan tujuannya?
|
||||
|
||||
#### Pertanyaan HTML:
|
||||
|
||||
* Apa yang `doctype` lakukan?
|
||||
* Apa perbedaan antara modus standar dan modus quirks?
|
||||
* Apa keterbatasan ketika melayani halaman XHTML?
|
||||
* Apa perbedaan antara HTML dan XHTML?
|
||||
* Apakah ada masalah dengan melayani halaman sebagai `aplikasi/xhtml+xml`?
|
||||
* Bagaimana Anda melayani halaman dengan konten dalam berbagai bahasa?
|
||||
* Apa jenis hal yang harus Anda berhati-hati ketika desain atau mengembangkan untuk situs multibahasa?
|
||||
* Apa `data` atribut baik untuk?
|
||||
* Pertimbangkan HTML5 sebagai platform web terbuka. Apa blok bangunan HTML5?
|
||||
* Jelaskan perbedaan antara cookie, sessionStorage dan localStorage.
|
||||
* Dapatkah Anda menjelaskan perbedaan antara `GET` dan` POST`?
|
||||
* Jelaskan perbedaan antara `<script>`, `<script async>` & `<script defer>`.
|
||||
* Apa saja hal yang harus Anda waspadai ketika mendesain atau mengembangkan situs multibahasa?
|
||||
* Apa kegunaan atribut `data-`?
|
||||
* Katakan HTML5 adalah platform web terbuka, apa saja yang membentuk HTML5?
|
||||
* Jelaskan perbedaan antara `cookie`, `sessionStorage` dan `localStorage`.
|
||||
* Jelaskan perbedaan antara `<script>`, `<script async>` dan `<script defer>`.
|
||||
* Mengapa meletakkan `<link>` CSS di antara `<head></head>` dan meletakkan `<script>` JS sebelum `<body></body>` dianggap baik pada umumnya? Apakah ada pengecualiannya?
|
||||
* Apa itu _progressive rendering_?
|
||||
* Apakah Anda pernah menggunakan bahasa HTML templating yang berbeda?
|
||||
* Jelaskan perbedaan antara `GET` dan` POST`.
|
||||
|
||||
#### Pertanyaan CSS:
|
||||
|
||||
* Apa perbedaan antara CLASS dan ID dalam CSS?
|
||||
* Jelaskan apa "reset" CSS berkas dilakukan dan bagaimana hal itu berguna.
|
||||
* Jelaskan Mengapung dan bagaimana mereka bekerja.
|
||||
* Jelaskan z-index dan bagaimana susun konteks terbentuk.
|
||||
* Apa saja berbagai teknik kliring dan yang sesuai untuk konteks apa?
|
||||
* Jelaskan sprite CSS, dan bagaimana Anda akan menerapkannya pada halaman atau situs.
|
||||
* Apa teknik pengganti gambar favorit Anda dan mana yang Anda gunakan kapan?
|
||||
* Hacks properti CSS, kondisional termasuk Css file, atau ... sesuatu yang lain?
|
||||
* Bagaimana Anda melayani halaman Anda untuk browser fitur-dibatasi?
|
||||
* Teknik apa / proses yang Anda gunakan?
|
||||
* Apa cara yang berbeda untuk visual menyembunyikan konten (dan membuatnya tersedia hanya untuk pembaca layar)?
|
||||
* Apakah Anda pernah menggunakan sistem grid, dan jika demikian, apa yang Anda inginkan?
|
||||
* Apakah Anda menggunakan atau menerapkan pertanyaan media atau mobile tertentu layout / CSS?
|
||||
* Setiap keakraban dengan styling SVG?
|
||||
* Bagaimana Anda mengoptimalkan halaman web Anda untuk cetak?
|
||||
* Apa adalah beberapa "gotchas" untuk menulis CSS efisien?
|
||||
* Apa perbedaan antara `class` dan `id` dalam CSS?
|
||||
* Apa perbedaan antara reset dan normalisasi dalam CSS? Apa yang Anda pilih, dan kenapa?
|
||||
* Jelaskan `float` dan cara kerjanya.
|
||||
* Jelaskan z-index dan bagaimana susunan konteks terbentuk.
|
||||
* Apa saja teknik-teknik kliring, dan yang mana sesuai untuk konteks apa?
|
||||
* Jelaskan sprite CSS, dan bagaimana Anda implementasikan pada suatu halaman atau situs.
|
||||
* Apa teknik pengganti gambar favorit Anda? Dan yang mana akan Anda gunakan, lalu kapan digunakan?
|
||||
* Bagaimana anda menghadapi masalah styling yang spesifik pada browser?
|
||||
* Bagaimana Anda melayani halaman untuk browser dengan fitur terbatas?
|
||||
* Teknik / proses apa yang Anda gunakan?
|
||||
* Apa saja cara-cara untuk menyembunyikan suatu konten secara visual (dan membuatnya tersedia hanya untuk pembaca layar / _screenreader_)?
|
||||
* Apakah Anda pernah menggunakan sistem grid, dan jika pernah, apa yang lebih Anda sukai?
|
||||
* Apakah Anda pernah menggunakan atau menerapkan _media query_ atau layout / CSS khusus untuk mobile?
|
||||
* Apakah Anda fasih dengan styling SVG?
|
||||
* Bagaimana Anda mengoptimalkan halaman web Anda untuk dicetak?
|
||||
* Apa saja yang perlu diwaspadai dalam menulis CSS yang efisien?
|
||||
* Apa keuntungan / kerugian dari menggunakan preprosesor CSS? (Sass, Compass, Stylus, LESS)
|
||||
* Jika demikian, jelaskan apa yang Anda suka dan tidak suka tentang preprosesor CSS yang telah digunakan.
|
||||
* Jelaskan apa yang Anda sukai dan tidak sukai dari preprosesor CSS yang pernah Anda gunakan.
|
||||
* Bagaimana Anda akan menerapkan desain web comp yang menggunakan font non-standar?
|
||||
* Jelaskan bagaimana browser menentukan apa elemen cocok dengan pemilih CSS.
|
||||
* Jelaskan pemahaman Anda tentang model kotak dan bagaimana Anda akan memberitahu browser di CSS untuk membuat tata letak Anda dalam model kotak yang berbeda.
|
||||
* Apa ```* { box-sizing: border-box; }```? Apa keuntungan?
|
||||
* Daftar sebagai banyak nilai untuk properti display yang dapat Anda ingat.
|
||||
* Apa perbedaan antara inline dan inline-block?
|
||||
* Apa perbedaan antara, tetap, unsur mutlak dan statis diposisikan relatif?
|
||||
* The 'C' di CSS adalah singkatan dari Cascading. Bagaimana prioritas ditentukan dalam menentukan gaya (beberapa contoh)? Bagaimana Anda bisa menggunakan sistem ini untuk keuntungan Anda?
|
||||
* Apa yang ada kerangka kerja CSS telah Anda gunakan secara lokal, atau dalam produksi? (Bootstrap, PureCSS, Foundation dll)
|
||||
* Jika demikian, yang mana? Jika Anda bisa, bagaimana Anda akan mengubah / memperbaiki mereka?
|
||||
* Apakah Anda bermain-main dengan yang baru CSS Flexbox atau Grid spesifikasi?
|
||||
* Bagaimana desain responsif yang berbeda dari desain adaptif?
|
||||
* Apakah Anda pernah bekerja dengan grafis retina? Jika demikian, kapan dan teknik apa yang Anda gunakan?
|
||||
* Jelaskan bagaimana browser mencocokan suatu elemen dengan _selector_ CSS.
|
||||
* Jelaskan apa itu _pesudo-element_ dan bagaimana penggunaannya.
|
||||
* Jelaskan pemahaman Anda tentang model kotak, dan bagaimana Anda memberitahu suatu browser dalam CSS untuk menggunakan layout model kotak yang mana.
|
||||
* Apa yang terjadi dengan ini : ```{ box-sizing: border-box; }```? Apa keuntungannya?
|
||||
* Sebutkan sebanyak mungkin _value_ untuk properti _display_ yang anda ingat.
|
||||
* Apa perbedaan antara `inline` dan `inline-block`?
|
||||
* Apa perbedaan antara elemen yang diposisikan secara `relative`, `fixed`, `absolute`, dan `static`?
|
||||
* Huruf 'C' dalam CSS adalah singkatan dari Cascading. Bagaimana cara kerja prioritas dalam menentukan stylenya (berikan beberapa contoh)? Bagaimana Anda bisa menggunakan sistem ini untuk keuntungan Anda?
|
||||
* Framework CSS apa yang pernah Anda gunakan secara lokal, maupun dalam produksi? (Bootstrap, PureCSS, Foundation dll). Dan kalau bisa, bagaimana Anda ingin mengubah / memperbaikinya?
|
||||
* Apakah Anda pernah mencoba CSS Flexbox yang baru atau Grid specs?
|
||||
* Bagaimana desain responsif berbeda dari desain adaptif?
|
||||
* Apakah Anda pernah bekerja dengan grafis retina? Jika ya, kapan dan teknik apa yang Anda gunakan?
|
||||
* Apakah Anda mempunyai alasan untuk menggunakan `translate()` dibandingkan _posisi absolute_, ataupun sebaliknya? Kenapa?
|
||||
|
||||
#### Pertanyaan JS:
|
||||
|
||||
* Jelaskan delegasi acara
|
||||
* Jelaskan bagaimana `this` bekerja dalam JavaScript
|
||||
* Jelaskan karya warisan bagaimana prototypal
|
||||
* Bagaimana Anda pergi tentang pengujian Anda JavaScript?
|
||||
* AMD vs CommonJS?
|
||||
* Jelaskan mengapa berikut tidak bekerja sebagai Iife: `function foo () {} ();`.
|
||||
* Apa yang perlu diubah untuk benar menjadikannya sebuah Iife?
|
||||
* Apa perbedaan antara variabel yaitu: `null`,` undefined` atau `undeclared`?
|
||||
* Bagaimana Anda pergi tentang memeriksa untuk negara-negara ini?
|
||||
* Apa penutupan, dan bagaimana / mengapa Anda akan menggunakan satu?
|
||||
* Apa kasus penggunaan khas untuk fungsi anonim?
|
||||
* Jelaskan _event delegation_.
|
||||
* Jelaskan bagaimana cara kerja `this` dalam JavaScript.
|
||||
* Jelaskan cara kerja _inheritance_ prototype.
|
||||
* Apa pendapat Anda mengenai AMD dan CommonJS?
|
||||
* Jelaskan mengapa berikut ini tidak bekerja sebagai IIFE: `function foo () {} ();`.
|
||||
* Apa yang perlu diubah untuk membuatnya sebagai IIFE?
|
||||
* Apa perbedaan antara variabel: `null`,` undefined` dan `undeclared`?
|
||||
* Bagaimana Anda menguji status-status variabel ini?
|
||||
* Apa itu _closure_, dan bagaimana / mengapa Anda akan menggunakannya?
|
||||
* Bagaimana biasanya fungsi anonim (_anonymous function_) digunakan?
|
||||
* Bagaimana Anda mengatur kode Anda? (pola modul, warisan klasik?)
|
||||
* Apa perbedaan antara objek tuan rumah dan benda-benda asli?
|
||||
* Perbedaan antara: `function Person(){}`, `var person = Person()`, dan `var person = new Person()`?
|
||||
* Apa perbedaan antara _host object_ dan _native object_?
|
||||
* Apa perbedaan antara: `function Person(){}`, `var person = Person()`, dan `var person = new Person()`?
|
||||
* Apa perbedaan antara `.call` dan` .apply`?
|
||||
* Jelaskan `Function.prototype.bind`.
|
||||
* Bila Anda mengoptimalkan kode Anda?
|
||||
* Bila Anda akan menggunakan `document.write ()`?
|
||||
* Apa perbedaan antara fitur deteksi, fitur inferensi, dan menggunakan string UA
|
||||
* Jelaskan AJAX dalam sedetail mungkin.
|
||||
* Jelaskan bagaimana JSONP bekerja (dan bagaimana itu tidak benar-benar AJAX).
|
||||
* Kapan saja `document.write ()` digunakan?
|
||||
* Kapan saja Anda mengoptimalkan kode Anda?
|
||||
* Apa perbedaan antara fitur deteksi, fitur inferensi, dan penggunaan string UA?
|
||||
* Jelaskan AJAX sedetail mungkin.
|
||||
* Apa keuntungan dan kerugian menggunakan AJAX?
|
||||
* Jelaskan bagaimana cara kerja JSONP (dan bagaimana itu bukan AJAX).
|
||||
* Apakah Anda pernah menggunakan JavaScript template?
|
||||
* Jika demikian, apa perpustakaan telah Anda gunakan? (Mustache.js, Handlebars dll.)
|
||||
* Jelaskan "mengangkat".
|
||||
* Jelaskan acara menggelegak.
|
||||
* Kalau ya, _library_ apa yang pernah Anda gunakan? (Mustache.js, Handlebars dll.)
|
||||
* Jelaskan _"hoisting"_.
|
||||
* Jelaskan _event bubbling_.
|
||||
* Apa perbedaan antara "atribut" dan "properti"?
|
||||
* Mengapa memperluas dibangun dalam JavaScript benda bukan ide yang baik?
|
||||
* Perbedaan antara acara buka dokumen dan dokumen event siap?
|
||||
* Mengapa tidak baik meng-extend object Javascript built-in?
|
||||
* Apa perbedaan antara _document load_ dan _document ready_?
|
||||
* Apa perbedaan antara `==` dan `===`?
|
||||
* Jelaskan kebijakan yang sama-asal berkaitan dengan JavaScript.
|
||||
* Membuat pekerjaan ini:
|
||||
* Jelaskan kebijakan _same-origin_ dalam konteks JavaScript.
|
||||
* Kerjakan ini :
|
||||
```javascript
|
||||
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
|
||||
```
|
||||
* Mengapa disebut ekspresi Ternary, apa kata "Ternary" menunjukkan?
|
||||
* Apa `"use strict";`? apa keuntungan dan kerugian untuk menggunakannya?
|
||||
* Buat untuk loop yang iterates sampai `100` sementara keluaran **" desis "** di kelipatan `3`, `"buzz"` pada kelipatan `5` dan **" fizzbuzz "** di kelipatan `3` dan `5`
|
||||
* Mengapa, secara umum, ide yang baik untuk meninggalkan lingkup global dari sebuah situs web seperti apa dan tidak pernah menyentuhnya?
|
||||
* Mengapa disebut ekspresi Ternary, dan apa maksud "Ternary"?
|
||||
* Apa itu `"use strict";`? Apa keuntungan dan kerugian dalam penggunaannya?
|
||||
* Buatkan loop yang beriterasi sampai `100`, dan print **"fizz"** pada kelipatan `3`, **"buzz"** pada kelipatan `5` dan **"fizzbuzz"** pada kelipatan `3` dan `5`.
|
||||
* Kenapa pada umumnya, lebih baik membiarkan scope global dalam suatu website sebagai apa adanya dan jangan diutak-atik?
|
||||
* Kenapa `load` event digunakan? Apakah event ini mempunyai kerugiannya? Apakah Anda tau cara alternatif lain, dan kenapa Anda menggunakan cara itu?
|
||||
* Jelaskan apa itu _single page app_, dan bagaimana membuatnya ramah SEO?
|
||||
* Sejauh apa pengalaman Anda dengan _promise_ dan / atau _polyfills_?
|
||||
* Apakah pro dan kontrak menggunakan _promise_ dibandingkan _callback_?
|
||||
* Apa keuntungan / kerugian menulis kode JavaScript dalam bahasa yang kompile ke JavaScript?
|
||||
* Program dan teknik apa yang Anda gunakan dalam mendebug kode Javascript?
|
||||
* Konstruksi bahasa apa yang Anda gunakan untuk mengiterasi properti objek dan array?
|
||||
* Jelaskan perbedaan antara object _mutable_ dan _immutable_
|
||||
* Apa contoh objek _immutable_ dalam JavaScript?
|
||||
* Apa pro dan kontra _immutability_?
|
||||
* Bagaimana Anda mencapai _immutability_ dalam kode Anda?
|
||||
* Jelaskan perbedaan antara fungsi _synchronous_ dan _asynchronous_
|
||||
* Apa itu _event loop_?
|
||||
* Apa perbedaan antara _call stack_ dan _task queue_?
|
||||
|
||||
#### Pertanyaan Jquery:
|
||||
#### Pertanyaan Pengujian
|
||||
|
||||
* Jelaskan "chaining".
|
||||
* Jelaskan "deferreds".
|
||||
* Apa sajakah optimasi tertentu jQuery Anda dapat menerapkan?
|
||||
* Apa iru `.end()` ?
|
||||
* Nama 4 nilai yang berbeda Anda dapat lulus dengan metode jQuery.
|
||||
* Selector (string), HTML (string), Callback (function), HTML element, object, array, element array, jQuery Object, dll
|
||||
* Apa perbedaan antara `.get()`, `[]`, dan `.eq()`?
|
||||
* Apa keuntungan / kerugian menguji kode Anda?
|
||||
* Program apa yang Anda gunakan untuk menguji kinerja kode Anda?
|
||||
* Apa perbedaan antara tes unit dan tes fungsi/integrasi?
|
||||
* Apa tujuan program _lint_?
|
||||
|
||||
#### Pertanyaan Coding:
|
||||
#### Pertanyaan Kinerja
|
||||
* Tool apa yang Anda gunakan untuk mencari masalah kinerja dalam kode Anda?
|
||||
* Apa saja cara-cara yang dapat meningkatkan kinerja scrolling dalam website Anda?
|
||||
* Jelaskan perbedaan antara _layout_, _painting_, dan _compositing_.
|
||||
|
||||
* Pertanyaan: Bagaimana Anda akan membuat pekerjaan ini *
|
||||
#### Pertanyaan Jaringan:
|
||||
* Secara tradisional, mengapa lebih baik untuk melayani aset situs dari beberapa domain?
|
||||
* Jelaskan semampu Anda, bagaimana proses kerja dari saat Anda mengetikkan URL situs web sampai saat halamannya selesai tampil di layar Anda.
|
||||
* Apa perbedaan antara Long-Polling, Websockets dan Server-Sent Events (SSE)?
|
||||
* Jelaskan _request_ dan _response_ header berikut ini:
|
||||
* Perbedaan antara Expires, Date, Age dan If-Modified-...
|
||||
* Do Not Track (DNT)
|
||||
* Cache-Control
|
||||
* Transfer-Encoding
|
||||
* ETag
|
||||
* X-Frame-Options
|
||||
* Apa itu aksi HTTP? Sebutkan aksi-aksi HTTP yang Anda tau, dan jelaskan.
|
||||
|
||||
#### Pertanyaan koding:
|
||||
|
||||
*Pertanyaan: Apa hasil `foo`?*
|
||||
```javascript
|
||||
add(2, 5); // 7
|
||||
add(2) (5); // 7
|
||||
var foo = 10 + '20';
|
||||
```
|
||||
|
||||
* Pertanyaan: Apa nilai dikembalikan dari pernyataan berikut *?
|
||||
*Pertanyaan: Bagaimana Anda kerjakan berikut ini?*
|
||||
```javascript
|
||||
add(2, 5); // 7
|
||||
add(2)(5); // 7
|
||||
```
|
||||
|
||||
*Pertanyaan: Apa hasil yang dikembalikan dari pernyataan berikut?*
|
||||
```javascript
|
||||
"i'm a lasagna hog".split("").reverse().join("");
|
||||
```
|
||||
|
||||
* Pertanyaan: Apakah nilai `window.foo`?*
|
||||
*Pertanyaan: Apa nilai `window.foo`?*
|
||||
```javascript
|
||||
(Window.foo || (window.foo = "bar"));
|
||||
( window.foo || (window.foo = "bar") );
|
||||
```
|
||||
|
||||
* Pertanyaan: Apa hasil dari dua tanda di bawah ini *
|
||||
*Pertanyaan: Apa hasil dari dua alert di bawah ini?*
|
||||
```javascript
|
||||
var foo = "Hello";
|
||||
(function() {
|
||||
|
|
@ -183,22 +212,40 @@ var foo = "Hello";
|
|||
alert(foo + bar);
|
||||
```
|
||||
|
||||
* Pertanyaan: Apakah nilai `foo.length` *
|
||||
*Pertanyaan: Apa hasil `foo.length`?*
|
||||
```javascript
|
||||
var foo = [];
|
||||
foo.push (1);
|
||||
foo.push (2);
|
||||
```
|
||||
|
||||
#### Pertanyaan Seru:
|
||||
*Pertanyaan: Apa hasil `foo.x`?*
|
||||
```javascript
|
||||
var foo = {n: 1};
|
||||
var bar = foo;
|
||||
foo.x = foo = {n: 2};
|
||||
```
|
||||
|
||||
* Apa proyek keren yang Anda baru saja bekerja pada?
|
||||
*Pertanyaan: Apa yang diprint dalam kode berikut ini?*
|
||||
```javascript
|
||||
console.log('one');
|
||||
setTimeout(function() {
|
||||
console.log('two');
|
||||
}, 0);
|
||||
console.log('three');
|
||||
```
|
||||
|
||||
#### Pertanyaan Seru / Sampingan:
|
||||
|
||||
* Apa proyek menarik yang baru-baru ini Anda kerjakan?
|
||||
* Apa sajakah hal-hal yang Anda sukai tentang alat pengembang yang Anda gunakan?
|
||||
* Apakah Anda memiliki proyek hewan peliharaan? Jenis apa?
|
||||
* Apa fitur favorit Anda Internet Explorer?
|
||||
* Bagaimana Anda seperti kopi Anda?
|
||||
* Apakah Anda mempunyai proyek yang anda sukai? Apa saja?
|
||||
* Apa fitur favorit Anda dari Internet Explorer?
|
||||
* Bagaimana Anda menyukai kopi Anda?
|
||||
|
||||
|
||||
#### Contributors:
|
||||
|
||||
Dokumen ini dimulai pada tahun 2009 sebagai kolaborasi [@paul_irish](http://twitter.com/paul_irish) [@bentruyman](http://twitter.com/bentruyman) [@cowboy](http://twitter.com/cowboy) [@ajpiano](http://twitter.com/ajpiano) [@SlexAxton](http://twitter.com/slexaxton) [@boazsender](http://twitter.com/boazsender) [@miketaylr](http://twitter.com/miketaylr) [@vladikoff](http://twitter.com/vladikoff) [@gf3](http://twitter.com/gf3) [@jon_neal](http://twitter.com/jon_neal) [@sambreed](http://twitter.com/sambreed) dan [@iansym](http://twitter.com/iansym). Sejak itu menerima sumbangan dari [100 developers](https://github.com/h5bp/Front-end-Developer-Interview-Questions/graphs/contributors).
|
||||
Dokumen ini dimulai pada tahun 2009 sebagai kolaborasi dari [@paul_irish](http://twitter.com/paul_irish) [@bentruyman](http://twitter.com/bentruyman) [@cowboy](http://twitter.com/cowboy) [@ajpiano](http://twitter.com/ajpiano) [@SlexAxton](http://twitter.com/slexaxton) [@boazsender](http://twitter.com/boazsender) [@miketaylr](http://twitter.com/miketaylr) [@vladikoff](http://twitter.com/vladikoff) [@gf3](http://twitter.com/gf3) [@jon_neal](http://twitter.com/jon_neal) [@sambreed](http://twitter.com/sambreed) dan [@iansym](http://twitter.com/iansym).
|
||||
|
||||
Sejak itu sudah menerima kontribusi lebih dari [100 developers](https://github.com/h5bp/Front-end-Developer-Interview-Questions/graphs/contributors).
|
||||
|
|
|
|||
|
|
@ -38,45 +38,40 @@ La maggior parte delle domande sono state prese da una discussione su [oksoclap]
|
|||
|
||||
* Cosa hai imparato ieri/questa settimana?
|
||||
* Cosa ti entusiasma o ti interessa della programmazione?
|
||||
* Qual è una sfida tecnica che hai incontrato e come l'hai risolta?
|
||||
* Quali considerazioni fai riguardo alla UI, alla Sicurezza, alle Prestazioni, al SEO, alla Manutenibilità o alla Tecnologia mentre costruisci una applicazione web o un sito?
|
||||
* Parla del tuo ambiente di sviluppo preferito. (Sistema Operativo, Editor di testo, Browser, Strumenti ecc.)
|
||||
* Con quali sistemi di controllo di versione [*VCS*] hai familiarità?
|
||||
* Puoi descrivere il tuo metodo di lavoro quando crei una pagina web?
|
||||
* Se avessi 5 fogli di stile differenti, come ti comporteresti per integrarli al meglio nel sito?
|
||||
* Puoi descrivere la differenza tra miglioramento progressivo [*progressive enhancement*] e degradazione elegante [*graceful degradation*]?
|
||||
* Punti bonus se descrive il rilevamento di funzionalità [*feature detection*]
|
||||
* Spiega cosa significa "HTML Semantico".
|
||||
* Come ottimizzeresti le risorse/asset di un sito?
|
||||
* Mi aspetto svariate soluzioni che possono includere:
|
||||
* Concatenazione dei file
|
||||
* Minimizzazione [*minification*] dei file
|
||||
* Uso di CDN
|
||||
* Caching
|
||||
* ecc...
|
||||
* Perché è meglio servire file per il sito da più domini?
|
||||
* Quante risorse scaricherà per volta un browser da uno specifico dominio?
|
||||
* Quante risorse scaricherà per volta un browser da uno specifico dominio?
|
||||
* Quali sono le eccezioni?
|
||||
* Citami 3 modi per diminuire il caricamento della pagina. (percepito o effettivo tempo di caricamento)
|
||||
* Se cominci a lavorare su un progetto già iniziato dove vengono usati tab invece di spazi, cosa fai?
|
||||
* Suggerisci di usare per il progetto qualcosa tipo EditorConfig (http://editorconfig.org)
|
||||
* Ti adatti alle convezioni (rimani coerente)
|
||||
* `issue :retab! command`
|
||||
* Scrivi una semplice pagina con slideshow
|
||||
* Punti bonus se non utilizza JS.
|
||||
* Che strumenti usi per testare le prestazioni del tuo codice?
|
||||
* Profiler, JSPerf, Dromaeo
|
||||
* Se potessi approfondire una tecnologia quest'anno, quale sarebbe?
|
||||
* Descrivi come creeresti una semplice pagina con slideshow.
|
||||
* Se avessi la possibilità id diventare esperto in una tecnologia, quale sceglieresti?
|
||||
* Spiega l'importanza degli standard e degli enti di normazione.
|
||||
* Cosa è il FOUC? Come eviti il FOUC?
|
||||
* Spiega cosa sono ARIA e lettori di schermo [*screenreaders*] e come rendere un sito web accessibile.
|
||||
* Spiega alcuni dei pro e contro delle animazioni CSS rispetto alle animazioni Javascript.
|
||||
|
||||
####[[⬆]](#toc) <a name='html'>Domande Specifiche su HTML:</a>
|
||||
####[[⬆]](#toc) <a name='html'>Domande su HTML:</a>
|
||||
|
||||
* Cosa fa il `doctype`?
|
||||
* Qual è la differenza tra standard mode e quirks mode?
|
||||
* Quali sono le limitazioni quando servi pagine XHTML?
|
||||
* Ci sono dei problemi a servire le pagine come `application/xhtml+xml`?
|
||||
* Qual è la differenza tra HTML e XHTML?
|
||||
* Ci sono dei problemi a servire le pagine come `application/xhtml+xml`?
|
||||
* Come servi una pagina con il contenuto in più lingue?
|
||||
* A cosa devi far attenzione quando progetti o sviluppi siti multilingua?
|
||||
* A cosa devi far attenzione quando progetti o sviluppi siti multilingua?
|
||||
* Per cosa sono utili gli attributi `data-`?
|
||||
* Considera HTML5 come una piattaforma web aperta. Quali sono i mattoni di HTML5?
|
||||
* Descrivi le differenze tra cookie, sessionStorage e localStorage.
|
||||
* Descrivi le differenze tra `cookie`, `sessionStorage` e `localStorage`.
|
||||
* Descrivi la differenza tra `<script>`, `<script async>` e `<script defer>`.
|
||||
* Perche è generalmente una buona idea posizionare CSS `<link>` tags all'interno di `<head></head>` e Javascript `<script>` tags appena prima di `</body>`? Conosci eccezioni?
|
||||
* Cos'è il rendering progressivo [*progressive rendering*]?
|
||||
* Hai mai utilizzato differeti liguaggi di templating HTML prima?
|
||||
|
||||
####[[⬆]](#toc) <a name='css'>Domande Specifiche su CSS:</a>
|
||||
|
||||
|
|
@ -8,16 +8,16 @@ O artigo [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12
|
|||
|
||||
## <a name='toc'>Tabela de Conteúdos</a>
|
||||
|
||||
1. [Original Contributors](#contributors)
|
||||
1. [General Questions](#general)
|
||||
1. [HTML Questions](#html)
|
||||
1. [CSS Questions](#css)
|
||||
1. [JS Questions](#js)
|
||||
1. [jQuery Questions](#jquery)
|
||||
1. [Coding Questions](#jscode)
|
||||
1. [Fun Questions](#fun)
|
||||
1. [Other Great References](#references)
|
||||
1. [License](#license)
|
||||
1. [Contribuintes Originais](#contributors)
|
||||
1. [Questões Gerais](#general)
|
||||
1. [Questões de HTML](#html)
|
||||
1. [Questões de CSS](#css)
|
||||
1. [Questões de JS](#js)
|
||||
1. [Questões de jQuery](#jquery)
|
||||
1. [Questões de Código](#jscode)
|
||||
1. [Questões Divertidas](#fun)
|
||||
1. [Outras Grandes Referências](#references)
|
||||
1. [Licença](#license)
|
||||
|
||||
####[[⬆]](#toc) <a name='contributors'>Contribuintes originais:</a>
|
||||
|
||||
|
|
@ -176,7 +176,7 @@ add(2)(5); // 7
|
|||
```javascript
|
||||
"sou uma lasanha".split("").reverse().join("");
|
||||
```
|
||||
**Answer: "ahnasal amu uos"**
|
||||
**Resposta: "ahnasal amu uos"**
|
||||
|
||||
|
||||
*Questão: Qual é o valor de `window.foo`?*
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
#Întrebări pentru interviu tehnic web front-end
|
||||
# Întrebări pentru interviu tehnic web front-end
|
||||
|
||||
Acest fişier conține o serie de întrebări pentru interviuri tehnice pe partea
|
||||
Acest fișier conține o serie de întrebări pentru interviuri tehnice pe partea
|
||||
de front-end, care pot fi folosite pentru a verifica un potențial candidat. Nu
|
||||
este deloc recomandat să fie folosite toate întrebările pentru un singur
|
||||
candidat ( ar lua câteva ore ). Alegând câteva întrebări din această listă ar
|
||||
candidat (ar lua câteva ore). Alegând câteva întrebări din această listă ar
|
||||
trebui să te ajute în verificarea calităților pe care le urmărești.
|
||||
|
||||
**Notă:** Ține în minte că multe dintre întrebări au răspuns liber și ar putea
|
||||
duce la discuții interesante, care ți-ar putea spune mai multe despre
|
||||
**Notă:** Ține minte că multe dintre întrebări au răspuns liber și ar
|
||||
putea duce la discuții interesante care ți-ar putea spune mai multe despre
|
||||
capacitățile persoanei.
|
||||
|
||||
## <a name='toc'>Cuprins</a>
|
||||
|
|
@ -16,124 +16,127 @@ capacitățile persoanei.
|
|||
1. [Întrebări despre HTML](#html)
|
||||
1. [Întrebări despre CSS](#css)
|
||||
1. [Întrebări despre JS](#js)
|
||||
1. [Întrebări despre jQuery](#jquery)
|
||||
1. [Întrebări despre rețea](#network)
|
||||
1. [Întrebări despre programare](#jscode)
|
||||
1. [Întrebări amuzante](#fun)
|
||||
|
||||
## Procesul de implicare
|
||||
|
||||
## <a name='toc'>Procesul de implicare</a>
|
||||
|
||||
1. [Contribuitori iniţiali](#contributors)
|
||||
1. [Contribuitori recenţi](https://github.com/h5bp/Front-end-Developer-Interview-Questions/graphs/contributors)
|
||||
1. [Cum să contribui]( )
|
||||
1. [Licenţă](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/LICENSE.md)
|
||||
1. [Contribuitori](#contributors)
|
||||
1. [Cum să contribui](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/CONTRIBUTING.md)
|
||||
1. [Licență](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/LICENSE.md)
|
||||
|
||||
####[[⬆]](#toc) <a name='general'>Întrebări generale:</a>
|
||||
|
||||
* Ce ai învățat ieri / săptămâna asta?
|
||||
* Ce ai învățat ieri/săptămâna asta?
|
||||
* Ce te fascinează sau interesează la programare?
|
||||
* Ce aspecte de UI, Securitate, Performanță, SEO, Întreținere sau Tehnologie iei în cosiderare când construiești o aplicație web sau un site?
|
||||
* Povestește despre mediul de lucru preferat. (OS, Editor, Browsere, Unelte,
|
||||
etc.)
|
||||
* Ce aspecte de UI, Securitate, Performanță, SEO, Întreținere sau Tehnologie
|
||||
iei în cosiderare când construiești o aplicație web sau un site?
|
||||
* Povestește despre mediul de lucru preferat.
|
||||
* Îți poți descrie fluxul de lucru când creezi o pagină web?
|
||||
* Dacă ai 5 fişiere cu cod CSS, cum le poţi integra cel mai bine într-un singur site?
|
||||
* Poți descrie diferența dintre "progressive enhancement" și "graceful degradation"?
|
||||
* Dacă ai 5 fișiere cu cod CSS, cum le poți integra cel mai bine în site?
|
||||
* Poți descrie diferența dintre "progressive enhancement" și "graceful
|
||||
degradation"?
|
||||
* Cum ai optimiza resursele statice ale unui site?
|
||||
* Tradiţional, de ce a fost mai bine să serveşti resurse din mai multe domenii?
|
||||
* Câte resurse poate un browser descărca de la un domeniu la un moment dat?
|
||||
* Care sunt excepţiile?
|
||||
* Care sunt excepțiile?
|
||||
* Numește 3 moduri pentru a scădea timpul de încarcare a paginii. (perceput
|
||||
sau chiar timpul de descărcare)
|
||||
* Dacă intri într-un proiect și se folosesc taburi în loc de spații, ce faci?
|
||||
* Scrie o pagină simplă slideshow
|
||||
* Ce unelte foloseşti pentru a testa performanţa codului pe care îl scrii?
|
||||
* Ce unelte folosești pentru a testa performanța codului pe care îl scrii?
|
||||
* Dacă ai putea învăța o tehnologie anul asta, care ar fi?
|
||||
* Care sunt diferenţele dintre Long-Polling, Websockets şi SSE?
|
||||
* Explică importanța standardelor și a organismelor de standardizare.
|
||||
* Ce este FOUC? Cum eviți Fouc?
|
||||
* Încearcă să descrii cât mai bine ce se întâmplă din momentul în care scrii un URL în browser până când este complet
|
||||
încărcat pe ecranul tău.
|
||||
* Explică ce sunt screenreaders şi ARIA şi cum faci un website accesibil.
|
||||
* Compară părţi bune şi negative pentru animaţii CSS versus animaţii JavaScript
|
||||
* Explică ce înseamnă "HTML Semantic".
|
||||
* Explică următoarele headere de request şi response:
|
||||
* Diferenţa dintre Expires, Date, Age şi If-Modified
|
||||
* DNT
|
||||
* Cache-Control
|
||||
* Transfer-Encoding
|
||||
* ETag
|
||||
* X-Frame-Options
|
||||
* Ce este `Flash of Unstyled Content`? Cum eviți FOUC?
|
||||
* Explică ce sunt screenreaders și ARIA și cum faci un site accesibil.
|
||||
* Compară părți bune și negative pentru animații CSS versus animații JavaScript.
|
||||
|
||||
####[[⬆]](#toc) <a name='html'>Întrebări HTML:</a>
|
||||
|
||||
####[[⬆]](#toc) <a name='html'>Întrebări despre HTML:</a>
|
||||
|
||||
* La ce este util `doctype`?
|
||||
* Care este diferența dintre "standards mode" și "quirks mode"?
|
||||
* Care sunt limitările când servești pagini XHTML?
|
||||
* Care este diferența dintre HTML și XHTML?
|
||||
* Apar probleme când servești pagini ca `application/xhtml+xml`?
|
||||
* Cum servești o pagină cu conținut în mai multe limbi?
|
||||
* La ce trebuie să fi atent când faci design sau dezvolți pentru site-uri multilingve
|
||||
* La ce trebuie să fi atent când faci design sau dezvolți pentru site-uri
|
||||
multilingve
|
||||
* La ce sunt utile atributele `data-`?
|
||||
* Considerând HTML5 ca o platformă web deschisă, care sunt parțile componente alte HTML5?
|
||||
* Considerând HTML5 ca o platformă web deschisă, care sunt parțile
|
||||
componente alte HTML5?
|
||||
* Descrie diferența dintre cookies, sessionStorage și localStorage.
|
||||
* Poţi explica diferenţa dintre `GET` şi `POST`?
|
||||
* Descrie diferenţa dintre `<script>`, `<script async>` şi `<script defer>`.
|
||||
* Descrie diferența dintre `<script>`, `<script async>` și `<script defer>`.
|
||||
|
||||
####[[⬆]](#toc) <a name='css'>Întrebări CSS:</a>
|
||||
|
||||
* Care este diferenţa dintre clase şi ID în CSS?
|
||||
####[[⬆]](#toc) <a name='css'>Întrebări despre CSS:</a>
|
||||
|
||||
* Care este diferența dintre clase și ID-uri în CSS?
|
||||
* Descrie ce este un fișier CSS de resetare și la ce este util.
|
||||
* Descrie 'Float' si cum funcționează.
|
||||
* Descrie z-index şi cum se formează stacking context.
|
||||
* Descrie z-index și cum se formează stacking context.
|
||||
* Care sunt tehnicile de 'clearing' și care este potrivită pentru ce context
|
||||
* Explică conceptul de CSS sprites și cum le-ai implementa pe o pagină sau un site.
|
||||
* Care sunt tehnicile tale preferate pentru inlocuirea imaginilor și care când le folosești?
|
||||
* Hack-uri de proprietăți CSS, includerea condițională a fișierelor .css, sau... altceva?
|
||||
* Explică conceptul de CSS sprites și cum le-ai implementa pe o pagină sau
|
||||
un site.
|
||||
* Care sunt tehnicile tale preferate pentru înlocuirea imaginilor și care
|
||||
când le folosești?
|
||||
* Hack-uri de proprietăți CSS, includerea condițională a fișierelor .css,
|
||||
sau... altceva?
|
||||
* Cum servești pagini pentru browsere cu capabilități reduse?
|
||||
* Ce procese/tehnici folosești?
|
||||
* Care sunt diferitele modalități de a ascunde vizual conținut (dar sa-l faci disponibil pentru cititoare de ecrane) ?
|
||||
* Care sunt diferitele modalități de a ascunde vizual conținut (dar sa-l
|
||||
faci disponibil pentru cititoare de ecrane) ?
|
||||
* Ai folosit vreodată un system 'grid' și dacă da, ce preferi?
|
||||
* Ai folosit sau implementat 'media queries' sau interfețe/CSS specific pentru mobile ?
|
||||
* Ai folosit sau implementat 'media queries' sau interfețe/CSS specific
|
||||
pentru mobile?
|
||||
* Familiarități cu stilizarea unui SVG?
|
||||
* Cum optimizezi paginile pentru print?
|
||||
* Ceva 'gotchas' când scrii CSS eficient?
|
||||
* Care sunt avantajele/dezavantajele folosirii preprocesoarelor CSS (SASS, Compass, Stylus, LESS)
|
||||
* Descrie ce îți place respectiv nu îți place la preprocesoarele CSS pe care
|
||||
le-ai folosit
|
||||
* Care sunt avantajele/dezavantajele folosirii preprocesoarelor CSS (SASS,
|
||||
Compass, Stylus, LESS)
|
||||
* Descrie ce îți place respectiv nu îți place la preprocesoarele CSS pe
|
||||
care le-ai folosit
|
||||
* Cum ai implementa un design care folosește fonturi non-standard?
|
||||
* Explică cum un browser determina ce elemente se potrivesc unui selector CSS?
|
||||
* Explică cum întelegi conceptul dea "box model" si cum îi spui browser-ului prin CSS cum sa randeze layoutul în modele diferite
|
||||
* Explică cum întelegi conceptul dea "box model" si cum îi spui browser-ului
|
||||
prin CSS cum sa randeze layoutul în modele diferite
|
||||
* Ce face ```* { box-sizing: border-box; }```? Care sunt avantajele?
|
||||
* Ce proprietăţi de display şti?
|
||||
* Care este diferenţa dintre `inline` şi `inline-block`?
|
||||
* Care este diferenţa dintre poziţionarea relativă, fixă, absolută şi statică a unui element?
|
||||
* C-ul din CSS vine de la Cascading. Cum este determinată prioritatea în asignarea stilului ( câteva exemple )? Cum foloseşti acest sistem?
|
||||
* Ce framework CSS ai folosit local sau în producţie? (Bootstrap, PureCSS, Foundation etc.)
|
||||
* Ce ai schimba / îmbunătăţi la ele?
|
||||
* Ai avut ocazia să te joci cu noile specificaţii pentru CSS Flexbox sau Grid?
|
||||
* Ce proprietăți de display ști?
|
||||
* Care este diferența dintre `inline` și `inline-block`?
|
||||
* Care este diferența dintre poziționarea relativă, fixă, absolută și statică
|
||||
a unui element?
|
||||
* C-ul din CSS vine de la Cascading. Cum este determinată prioritatea în
|
||||
asignarea stilului (câteva exemple)? Cum folosești acest sistem?
|
||||
* Ce framework CSS ai folosit local sau în producție? (Bootstrap, PureCSS,
|
||||
Foundation etc.)
|
||||
* Ce ai schimba / îmbunătăți la ele?
|
||||
* Ai avut ocazia să te joci cu noile specificații pentru CSS Flexbox sau Grid?
|
||||
* Ai lucrat vreodata pentru retina display? Dacă da, ce tehnici ai folosit?
|
||||
|
||||
|
||||
####[[⬆]](#toc) <a name='js'>Întrebări JS:</a>
|
||||
####[[⬆]](#toc) <a name='js'>Întrebări despre JS:</a>
|
||||
|
||||
* Explică "event delegation".
|
||||
* Explică cum funcționează `this` în JavaScript.
|
||||
* Explică cum funcționează moștenirea prototipală.
|
||||
* Cum îti testezi codul JavaScript?
|
||||
* AMD vs. CommonJS?
|
||||
* Ce părere ai despre AMD vs. CommonJS?
|
||||
* Explică de ce următoarea nu functionează ca un IIFE: `function foo(){ }();`
|
||||
* Ce trebuie schimbat ca să o transformi într-o IIFE?
|
||||
* Care este diferența dintre o variabilă care este: `null`, `undefined` sau `undeclared`?
|
||||
* Care este diferența dintre o variabilă care este: `null`, `undefined` sau
|
||||
`undeclared`?
|
||||
* Cum ai face sa verifici după fiecare dintre stările acestea?
|
||||
* Ce este un "closure" și cum/de ce ai folosi unul?
|
||||
* Care este un caz în care sunt folosite funcții anonime?
|
||||
* Cum îți organizezi codul? (module pattern, moștenire?)
|
||||
* Care este diferența dintre obiecte host si obiecte native?
|
||||
* Diferența dintre: `function Person(){}`, `var person = Person()` și `person = new Person()`
|
||||
* Diferența dintre: `function Person(){}`, `var person = Person()` și
|
||||
`person = new Person()`
|
||||
* Care este diferența dintre `.call` și `.apply`?
|
||||
* Explică `Function.prototype.bind`?
|
||||
* Când îți optimizezi codul?
|
||||
* Când ai folosi `document.write()`?
|
||||
* Care este diferența dintre 'feature detection', 'feature inference' și folosirea șirului User Agent?
|
||||
* Care este diferența dintre 'feature detection', 'feature inference' și
|
||||
folosirea șirului User Agent?
|
||||
* Explică AJAX cât mai detaliat posibil.
|
||||
* Explică cum funcționează JSONP (și cum nu este chiar AJAX ).
|
||||
* Ai folosit vreodată template-uri JavaScript?
|
||||
|
|
@ -146,74 +149,112 @@ capacitățile persoanei.
|
|||
* Care este diferența dintre "==" și "==="?
|
||||
* Explică politica "same-origins" în legătură cu JavaScript.
|
||||
* Fă următorul cod să funcționeze:
|
||||
```javascript
|
||||
|
||||
```js
|
||||
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
|
||||
```
|
||||
* Ce este o expresie ternară și ce indică cuvântul ternar?
|
||||
* Ce este `"use strict;"` și care sunt avantajele si dezavantajele folosirii acestuia?
|
||||
* Create a for loop that iterates up to `100` while outputting **"fizz"** at multiples of `3`, `"buzz"` at multiples of `5` and **"fizzbuzz"** at multiples of `3` and `5`.
|
||||
* De ce este, de regulă, o idee bună să nu poluezi scope-ul global al unui website ?
|
||||
* Ce este `"use strict;"` și care sunt avantajele si dezavantajele folosirii
|
||||
acestuia?
|
||||
* Create a for loop that iterates up to `100` while outputting **"fizz"**
|
||||
at multiples of `3`, `"buzz"` at multiples of `5` and **"fizzbuzz"** at
|
||||
multiples of `3` and `5`.
|
||||
* De ce este, de regulă, o idee bună să nu poluezi scope-ul global al unui
|
||||
website?
|
||||
|
||||
####[[⬆]](#toc) <a name='jquery'>Întrebări jQuery:</a>
|
||||
|
||||
* Explică "chaining".
|
||||
* Explică "deferreds".
|
||||
* Poți vorbi despre ceva optimizări specifice jQuery pe care le poți implementa?
|
||||
* Ce face `.end()`?
|
||||
* Când și cum ai folosi un "namespace" pentru a lega un handler de eveniment?
|
||||
* Numește 4 valori diferite pe care le poți trimite unei metode jQuery.
|
||||
* Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object etc.
|
||||
* Care este diferența dintre `.get()`, `[]`, și `.eq()`?
|
||||
####[[⬆]](#toc) <a name='network'>Întrebări despre rețea:</a>
|
||||
|
||||
* Tradițional, de ce a fost mai bine să servești resurse de pe mai multe domenii?
|
||||
* Încearcă să descrii cât mai bine ce se întâmplă din momentul în care scrii
|
||||
un URL-ul unui site în browser până când este complet încărcat pe ecranul tău.
|
||||
* Care sunt diferențele dintre Long-Polling, WebSockets și Server-Sent Events?
|
||||
* Explică semnificația următoarelor antete HTTP:
|
||||
* Diferența dintre Expires, Date, Age și If-Modified
|
||||
* Do Not Track
|
||||
* Cache-Control
|
||||
* Transfer-Encoding
|
||||
* ETag
|
||||
* X-Frame-Options
|
||||
* Poți explica diferența dintre `GET` și `POST`?
|
||||
* Poți explica diferența dintre `GET` și `HEAD`?
|
||||
|
||||
|
||||
####[[⬆]](#toc) <a name='jscode'>Întrebări despre cod:</a>
|
||||
|
||||
*Întrebare: Cum ai face asta să funcţioneze?*
|
||||
```javascript
|
||||
*Întrebare: Care este valoarea lui `foo`?*
|
||||
|
||||
```js
|
||||
var foo = 10 + '20';
|
||||
```
|
||||
|
||||
*Întrebare: Cum ai face următoarea să funcționeze?*
|
||||
|
||||
```js
|
||||
add(2, 5); // 7
|
||||
add(2)(5); // 7
|
||||
```
|
||||
|
||||
*Întrebare: Ce valoare este returnată de expresia următoare?*
|
||||
```javascript
|
||||
|
||||
```js
|
||||
"i'm a lasagna hog".split("").reverse().join("");
|
||||
```
|
||||
|
||||
*Întrebare: Care este valoare lui `window.foo`?*
|
||||
```javascript
|
||||
|
||||
```js
|
||||
( window.foo || ( window.foo = "bar" ) );
|
||||
```
|
||||
|
||||
*Întrebare: Care este rezultatul celor două apelări ale funcției alert?*
|
||||
```javascript
|
||||
var foo = "Hello";
|
||||
(function() {
|
||||
var bar = " World";
|
||||
alert(foo + bar);
|
||||
})();
|
||||
|
||||
```js
|
||||
var foo = "Hello";
|
||||
(function() {
|
||||
var bar = " World";
|
||||
alert(foo + bar);
|
||||
})();
|
||||
alert(foo + bar);
|
||||
```
|
||||
|
||||
```javascript
|
||||
```js
|
||||
var foo = [];
|
||||
foo.push(1);
|
||||
foo.push(2);
|
||||
```
|
||||
|
||||
*Întrebare: Care este valoarea lui `foo.length`?*
|
||||
|
||||
```javascript
|
||||
var foo = {};
|
||||
foo.bar = 'hello';
|
||||
```js
|
||||
var foo = [];
|
||||
foo.push(1);
|
||||
foo.push(2);
|
||||
```
|
||||
*Întrebare: Care este valoarea lui `foo.length`?*
|
||||
|
||||
####[[⬆]](#toc) <a name='fun'>Întrebări amuzante:</a>
|
||||
|
||||
* Povesteşte-mi despre un proiect mişto la care ai lucrat recent?
|
||||
* Povestește-mi despre un proiect mișto la care ai lucrat recent?
|
||||
* Ce îți place cel mai mult la uneltele de dezvoltare pe care le folosești?
|
||||
* Ai proiecte personale? Ce fel?
|
||||
* Care este funcționalitatea ta preferată din Internet Explorer?
|
||||
* Cum îti place cafeaua?
|
||||
|
||||
####[[⬆]](#toc) <a name='contributors'>Contribuitori iniţiali:</a>
|
||||
####[[⬆]](#toc) <a name='contributors'>Contribuitori:</a>
|
||||
|
||||
Majoritatea întrebărilor au fost adunate dintr-un fir de discutie [oksoclap](http://oksoclap.com/) creat de [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) la care au contribuit apoi:
|
||||
Acest document a început în 2009 ca o colaborare între
|
||||
[@paul_irish](https://twitter.com/paul_irish)
|
||||
[@bentruyman](https://twitter.com/bentruyman)
|
||||
[@cowboy](https://twitter.com/cowboy)
|
||||
[@ajpiano](https://twitter.com/ajpiano)
|
||||
[@SlexAxton](https://twitter.com/slexaxton)
|
||||
[@boazsender](https://twitter.com/boazsender)
|
||||
[@miketaylr](https://twitter.com/miketaylr)
|
||||
[@vladikoff](https://twitter.com/vladikoff)
|
||||
[@gf3](https://twitter.com/gf3)
|
||||
[@jon_neal](https://twitter.com/jon_neal)
|
||||
[@sambreed](https://twitter.com/sambreed) și
|
||||
[@iansym](https://twitter.com/iansym).
|
||||
|
||||
De atunci au contribuit mai mult de [100 de
|
||||
persoane](https://github.com/h5bp/Front-end-Developer-Interview-Questions/graphs/contributors)!
|
||||
|
|
|
|||
|
|
@ -2,119 +2,104 @@
|
|||
|
||||
Detta arkiv innehåller ett urval av frågor som kan ställas till den arbetssökande. Det är verkligen inte rekommenderat att ställa alla frågor här till samma person (det skulle ta timmar). Att välja ut ett par stycken från listan bör hjälpa dig besluta huruvida den arbetssökande uppfyller dina krav.
|
||||
|
||||
[Rebecca Murphey](http://rmurphey.com/)s [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) är också en bra resurs att läsa in dig på innan du ger dig in i en intervju.
|
||||
|
||||
**Att tänka på:** Kom ihåg att många av de här frågorna är öppna och kan leda till intressanta diskussioner som berättar mer om personens kunskaper än vad en sluten fråga skulle.
|
||||
|
||||
## <a name='toc'>Innehållsförteckning</a>
|
||||
## Innehållsförteckning
|
||||
|
||||
1. [Ursprungliga skribenter](#contributors)
|
||||
1. [Allmänna frågor](#general)
|
||||
1. [HTML-frågor](#html)
|
||||
1. [CSS-frågor](#css)
|
||||
1. [JS-frågor](#js)
|
||||
1. [jQuery-frågor](#jquery)
|
||||
1. [Kodfrågor](#jscode)
|
||||
1. [Roliga frågor](#fun)
|
||||
1. [Andra bra resurser](#references)
|
||||
1. [Licens](#license)
|
||||
1. [Allmänna frågor](#general-questions)
|
||||
1. [HTML-frågor](#html-questions)
|
||||
1. [CSS-frågor](#css-questions)
|
||||
1. [JS-frågor](#js-questions)
|
||||
1. [Nätverksgrågor](#network-questions)
|
||||
1. [Kodfrågor](#coding-questions)
|
||||
1. [Roliga frågor](#fun-questions)
|
||||
|
||||
####[[⬆]](#toc) <a name='contributors'>Ursprungliga skribenter:</a>
|
||||
## Hjälpa till
|
||||
|
||||
Majoriteten av de här frågorna hämtades från en [oksoclap](http://oksoclap.com/)-tråd som ursprungligen skapades av [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) med bidrag från följande personer: [@bentruyman](http://twitter.com/bentruyman) [@cowboy](http://twitter.com/cowboy) [@ajpiano](http://ajpiano) [@SlexAxton](http://twitter.com/slexaxton) [@boazsender](http://twitter.com/boazsender) [@miketaylr](http://twitter.com/miketaylr) [@vladikoff](http://twitter.com/vladikoff) [@gf3](http://twitter.com/gf3) [@jon_neal](http://twitter.com/jon_neal) [@sambreed](http://twitter.com/sambreed) [@iansym](http://twitter.com/iansym)
|
||||
1. [Bidragande skribenter](#contributors)
|
||||
1. [Att hjälpa till](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/CONTRIBUTING.md)
|
||||
1. [Licens](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/LICENSE.md)
|
||||
|
||||
####[[⬆]](#toc) <a name='general'>Allmänna frågor:</a>
|
||||
#### Allmänna frågor:
|
||||
|
||||
* Vad lärde du dig igår / den här veckan?
|
||||
* Vad lärde du dig igår/den här veckan?
|
||||
* Vad tycker du är spännande eller intressant med kodning?
|
||||
* Berätta om en teknisk utmaning du haft nyligen och hur du löste den.
|
||||
* Vilka övervägningar gör du angående gränssnitt, säkerhet, prestanda, SEO, underhållsmässighet och tekniker när du bygger en webbapplikation eller -plats?
|
||||
* Berätta lite om den utvecklingsmiljö du helst sitter i? (OS, editor eller IDE, webbläsare, verktyg o.s.v.)
|
||||
* Berätta lite om den utvecklingsmiljö du helst sitter i.
|
||||
* Vilka versionshanteringssystem har du använt?
|
||||
* Kan du beskriva ditt arbetsflöde när du skapar en hemsida?
|
||||
* Om du har fem olika stilmallar, hur skulle du bäst integrera dem i sajten?
|
||||
* Filkonkatenering.
|
||||
* Kan du beskriva skillnaden mellan "progressive enhancement" och "graceful degradation"?
|
||||
* Bonuspoäng för att beskriva "feature detection"
|
||||
* Hur skulle du optimera en webbplats resurser?
|
||||
* Söker en rad lösningar som kan innefatta:
|
||||
* Sammanfoga filer (file concatenation)
|
||||
* Minska filstorleken (file minification)
|
||||
* Hosta via CDN
|
||||
* Caching
|
||||
* o.s.v.
|
||||
* Varför har det traditionellt sett varit bättre att servera webbplatsen från flera domäner?
|
||||
* Hur många resurser kan en webbläsare ladda från en specifik domän åt gången?
|
||||
* Hur många resurser kan en webbläsare ladda från en specifik domän åt gången?
|
||||
* Vilka är undantagen?
|
||||
* Bonuspoäng för att nämna mobila enheter som en möjlig nackdel (http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/).
|
||||
* Bonuspoäng för att nämna HTTP2/SPDY som ett undantag.
|
||||
* Nämn tre sätt att minska laddningstiden för en webbsida (uppfattad eller faktisk laddningstid).
|
||||
* Om du hoppade på ett projekt och de använde tabbar och du mellanslag, vad skulle du då göra?
|
||||
* Föreslå att projektet använder sig av något som t.ex. EditorConfig (http://editorconfig.org)
|
||||
* Håll dig till konventionerna (var konsekvent)
|
||||
* `issue :retab! command`
|
||||
* Sätt ihop ett enkelt bildspel
|
||||
* Bonuspoäng om det inte använder sig av JS.
|
||||
* Vilka verktyg använder du dig av för att testa din kods prestanda?
|
||||
* Profiler, JSPerf, Dromaeo
|
||||
* Beskriv hur du skulle göra ett enkelt bildspel.
|
||||
* Om du kunde bemästra en teknologi i år, vad skulle det vara?
|
||||
* Vad är skillnaderna mellan long-polling, WebSockets och SSE?
|
||||
* Beskriv varför det är viktigt med standarder och standardiseringsorganisationer.
|
||||
* Vad är FOUC? Hur undviker du FOUC?
|
||||
* Förklara så noggrannt du kan processen från att du skriver in en webbsidas URL till att sidan har laddats färdigt på din skärm.
|
||||
* Vad är "Flash of Unstyled Content"? Hur undviker du FOUC?
|
||||
* Förklara vad ARIA och skärmläsare är och hur man gör en webbplats tillgänglig.
|
||||
* Förklara några av fördelarna och nackdelarna mellan CSS- och JavaScript-animationer.
|
||||
|
||||
####[[⬆]](#toc) <a name='html'>HTML-frågor:</a>
|
||||
#### HTML-frågor:
|
||||
|
||||
* Vad gör en dokumenttyp (doctype)?
|
||||
* Vad är skillnaden mellan standard-läge och quirks-läge?
|
||||
* Vilka begränsningar utsätts du för när du hanterar XHTML-sidor?
|
||||
* Finns det några problem med att skicka sidor som `application/xhtml+xml`?
|
||||
* Vad gör en dokumenttyp (`doctype`)?
|
||||
* Vad är skillnaden mellan standardläge och quirksläge?
|
||||
* Vad är skillnaden mellan HTML och XHTML?
|
||||
* Finns det några problem med att skicka sidor som `application/xhtml+xml`?
|
||||
* Hur skickar du en sida innehållandes flera språk?
|
||||
* Vad måste du vara försiktig med när du designar eller utvecklar för flerspråkssidor?
|
||||
* Vad är `data-`-attributen bra för?
|
||||
* Tänk dig HTML5 som en öppen webb-plattform. Vad är byggstenarna i HTML5?
|
||||
* Beskriv skillnaden mellan cookies, sessionStorage och localStorage.
|
||||
* Kan du förklara skillnaden mellan `GET` och `POST`?
|
||||
* Vad måste du vara försiktig med när du designar eller utvecklar för flerspråkssidor?
|
||||
* Vad är `data-`-attribut bra för?
|
||||
* Tänk dig HTML5 som en öppen webbplattform. Vad är byggstenarna i HTML5?
|
||||
* Beskriv skillnaden mellan en `cookie`, `sessionStorage` och `localStorage`.
|
||||
* Beskriv skillnaden mellan `<script>`, `<script async>` och `<script defer>`.
|
||||
* Varför är det generellt en bra idé att lägga CSS-`<link>`ar mellan `<head></head>` och JS-`<script>`ar precis före `</body>`? Känner du till några undantag?
|
||||
* Vad är progressiv rendering?
|
||||
* Har du använt dig av några HTML-mallspråk tidigare?
|
||||
|
||||
####[[⬆]](#toc) <a name='css'>CSS-frågor:</a>
|
||||
#### CSS-frågor:
|
||||
|
||||
* Vad är skillnaden mellan klasser och ID:n i CSS?
|
||||
* Förklara vad en nollställnings(reset)-CSS-fil gör och varför den är användbar.
|
||||
* Bonuspoäng för att nämna baksidor med en nollställningsfil, och/eller nämna normaliseringsfil som ett bättre alternativ.
|
||||
* Vad är skillnaden mellan att "nollställa" och att "normalisera" CSS? Vad skulle du välja och varför?
|
||||
* Beskriv floats och hur de fungerar.
|
||||
* Beskriv z-index och hur stacking context skapas.
|
||||
* Beskriv BFC (Block Formatting Context) och hur det fungerar?
|
||||
* Vilka olika clearing-tekniker finns det och vilka passar för vilka sammanhang?
|
||||
* Förklara CSS-sprites och hur du skulle implementera dem på en sida.
|
||||
* Vilka är dina favorittekniker för bildersättning och vilka använder du i vilka situationer?
|
||||
* CSS "property hacks", villkorligt inkluderade .css-filer eller något annat?
|
||||
* Hur skulle du fixa webbläsarspecifika stilproblem?
|
||||
* Hur skickar du sidor till funktionsbegränsade webbläsare?
|
||||
* Vilka tekniker/processer använder du?
|
||||
* Vilka olika sätt finns det att visuellt dölja element (och bara göra dem tillgängliga för skärmläsare)?
|
||||
* Har du någonsin använt ett rutnätsystem, och i sådana fall, vilket föredrar du?
|
||||
* Har du någonsin använt ett rutnätsystem, och i sådana fall vilket föredrar du?
|
||||
* Har du använt eller implementerat mediafrågor eller mobilspecifika layouter/CSS:er?
|
||||
* Någon erfarenhet av att styla SVG?
|
||||
* Har du någon erfarenhet av att styla SVG?
|
||||
* Hur optimerar du dina webbplatser för utskrift?
|
||||
* Vilka är några av de fallgropar som finns för att skriva effektiv CSS?
|
||||
* Vilka är fördelarna/nackdelarna med att använda CSS-preprocessorer? (SASS, Compass, Stylus, LESS)
|
||||
* Om du använt några själv, beskriv vad du gillar och ogillar med dem.
|
||||
* Vilka är fördelarna/nackdelarna med att använda CSS-preprocessorer?
|
||||
* Beskriv vad du gillar och ogillar med de CSS-preprocessorer du använt.
|
||||
* Hur skulle du implementera en webbdesign som använder icke-standardiserade typsnitt?
|
||||
* Webbtypsnitt (Typsnittstjänster som: Google webbtypsnitt, Typekit o.s.v.)
|
||||
* Förklara hur en webbläsare bestämmer vilka element som matchar en selektor.
|
||||
* Beskriv pseudoelement och vad de används till.
|
||||
* Förklara boxmodellen och hur du skulle göra i CSS för att få webbläsaren att rendera din layout i olika boxmodeller.
|
||||
* Vad gör ```* { box-sizing: border-box; }```? Vad är dess fördelar?
|
||||
* Lista så många värden för display-egenskapen som du kan komma ihåg.
|
||||
* Vad är skillnaden mellan inline och inline-block?
|
||||
* Vad är skillnaden mellan element som är positionerade med relative, fixed, absolute och static?
|
||||
* Vilka CSS-ramverk har du använt lokalt eller i produktion? (Twitter Bootstrap, PureCSS, Foundation etc.)
|
||||
* Om du kunde, hur skulle du förändra/förbättra dem?
|
||||
* C:et i CSS står för "Cascading". Hur bestäms prioritet när stilar sätts (några exempel)? Hur kan du använda det här systemet till din fördel?
|
||||
* Vilka CSS-ramverk har du använt lokalt eller i produktion? Hur skulle du förändra/förbättra dem?
|
||||
* Har du lekt något med de nya CSS-specifikationerna för Flexbox och Grid?
|
||||
* På vilket sätt skiljer sig resposiv design från adaptiv design?
|
||||
* På vilket sätt skiljer sig responsiv design från adaptiv design?
|
||||
* Har du någon gång arbetat med retinagrafik? I så fall, när var det och vilka tekniker använde du?
|
||||
* Finns det någon anledning till att du skulle vilja använda `translate()` i stället för *absolutpositionering* och vice-versa? I så fall varför?
|
||||
|
||||
####[[⬆]](#toc) <a name='js'>JS-frågor:</a>
|
||||
#### JS-frågor:
|
||||
|
||||
* Förklara eventdelegering
|
||||
* Förklara eventdelegering.
|
||||
* Förklara hur `this` fungerar i JavaScript
|
||||
* Förklara hur prototypiskt arv fungerar
|
||||
* Hur gör du för att testa ditt JavaScript?
|
||||
* Förklara hur prototypiskt arv fungerar.
|
||||
* AMD eller CommonJS?
|
||||
* Förklara varför följande inte fungerar som en IIFE: `function foo(){ }();`.
|
||||
* Vad behöver ändras för att göra den till en fungerande IIFE?
|
||||
|
|
@ -122,69 +107,97 @@ Majoriteten av de här frågorna hämtades från en [oksoclap](http://oksoclap.c
|
|||
* Hur skulle du göra för att kolla efter någon av dessa?
|
||||
* Vad är en "closure" och hur/varför vill du använda det?
|
||||
* Vad är ett typiskt användningsområde för en anonym funktion?
|
||||
* Hur organiserar du din kod? (module pattern, classical inheritance?)
|
||||
* Hur organiserar du din kod? (Modulmönstret, klassiskt arv?)
|
||||
* Vad är skillnaden mellan "host objects" och "native objects"?
|
||||
* Skillnaden mellan: `function Person(){}`, `var person = Person()` och `var person = new Person()`?
|
||||
* Vad är skillnaden mellan `.call` och `.apply`?
|
||||
* Förklara `Function.prototype.bind`?
|
||||
* När optimerar du din kod?
|
||||
* Vad är skillnaden mellan `.call` och `.apply`?
|
||||
* Förklara `Function.prototype.bind`?
|
||||
* När skulle du använda `document.write()`?
|
||||
* De flesta genererade reklamerna använder fortfarande `document.write()` även om de flesta ogillar det
|
||||
* Vad är skillnaden mellan "feature detection", "feature inference", och att använda UA-strängen?
|
||||
* Förklara AJAX så noggrant som möjligt
|
||||
* Förklara hur JSONP fungerar (och varför det egentligen inte är AJAX)
|
||||
* Förklara AJAX så noggrant som möjligt.
|
||||
* Förklara hur JSONP fungerar (och varför det egentligen inte är AJAX).
|
||||
* Har du någonsin använt "JavaScript templating"?
|
||||
* Om så är fallet, vilka bibliotek har du använt? (Mustache.js, Handlebars o.s.v.)
|
||||
* Om så är fallet, vilka bibliotek har du använt?
|
||||
* Förklara "hoisting".
|
||||
* Beskriv "event bubbling".
|
||||
* Vad är skillnaden mellan "attribute" och "property"?
|
||||
* Vad är skillnaden mellan "attribute" och "property"?
|
||||
* Varför är det inte bra att utvidga (extend) inbyggda JavaScript-objekt?
|
||||
* Skillnaden mellan "document load event" och "document ready event"?
|
||||
* Vad är skillnaden mellan `==` och `===`?
|
||||
* Förklara "same-origin policy" med hänsyn till JavaScript.
|
||||
* Skillnaden mellan "document load event" och "document ready event"?
|
||||
* Vad är skillnaden mellan `==` och `===`?
|
||||
* Förklara "same-origin policy" med hänsyn till JavaScript.
|
||||
* Få det här att fungera
|
||||
```javascript
|
||||
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
|
||||
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
|
||||
```
|
||||
* Varför kallas det för "Ternary expression", vad menas med ordet "Ternary"?
|
||||
* Varför kallas det för "ternary expression", vad menas med ordet "ternary"?
|
||||
* Vad är `"use strict";`? Vilka är för- och nackdelarna med att använda det?
|
||||
* Skapa en for-loop som itererar upp till `100` medan den skriver ut **"fizz"** vid multiplar av `3`, **"buzz"** vid multiplar av `5` och **"fizzbuzz"** vid multiplar av `3` och `5`.
|
||||
* Varför är det generellt sett en bra idé att aldrig röra det globala scopet på en webbsida?
|
||||
* Varför skulle man vilja använda något som `load`-eventet? Har det eventet några nackdelar? Känner du till några alternativ och varför skulle man i så fall vilja använda dem?
|
||||
* Förklara vad en single page-app är och hur en sådan kan göras SEO-vänlig.
|
||||
* Hur stor erfarenhet har du av Promises och/eller polyfills för dem?
|
||||
* Vad är fördelarna och nackdelarna med att använda Promises i stället för callbacks?
|
||||
* Nämn några för- och nackdelar med att skriva JavaScript-kod i ett språk som kompilerar till JavaScript.
|
||||
|
||||
####[[⬆]](#toc) <a name='jquery'>jQuery-frågor:</a>
|
||||
#### Testfrågor:
|
||||
|
||||
* Förklara "chaining".
|
||||
* Förklara "deferreds".
|
||||
* Vad är några jQuery-optimeringar du kan göra?
|
||||
* Vad gör `.end()`?
|
||||
* Nämn fyra olika värden du kan skicka till jQuery-metoden.
|
||||
* Selektor (sträng), HTML (sträng), Callback (funktion), HTMLElement, objekt, array, array av element, jQuery-objekt o.s.v.
|
||||
* Vad är skillnaden mellan `.get()`, `[]`, och `.eq()`?
|
||||
* Nämn några för- och nackdelar med att testa sin kod.
|
||||
* Vilka verktyg skulle du använda för att testa din kods funktionalitet?
|
||||
* Vad är skillnaden mellan ett enhetstest och ett integrations-/funktionellt test?
|
||||
* Vad är syftet med ett verktyg för lintning av kodstil?
|
||||
|
||||
####[[⬆]](#toc) <a name='jscode'>Kodfrågor:</a>
|
||||
#### Prestandafrågor:
|
||||
|
||||
*Fråga: Implementera en modulofunktion som stämmer med nedan*
|
||||
* Vilka verktyg skulle du använda för att hitta en prestandabugg i din kod?
|
||||
* Nämn några sätt att förbättra din sajts skrollningsprestanda.
|
||||
* Beskriv skillnaden mellan "layout", "painting" och "compositing".
|
||||
|
||||
#### Nätverksfrågor:
|
||||
|
||||
* Varför har det traditionellt sett varit bättre att servera webbplatsen från flera domäner?
|
||||
* Förklara så noggrannt du kan processen från att du skriver in en webbsidas URL till att sidan har laddats färdigt på din skärm.
|
||||
* Vad är skillnaderna mellan long-polling, WebSockets och Server-Sent Events?
|
||||
* Förklara följande svarshuvuden:
|
||||
* Skillnaden mellan Expires, Date, Age och If-Modified-...
|
||||
* Do Not Track
|
||||
* Cache-Control
|
||||
* Transfer-Encoding
|
||||
* ETag
|
||||
* X-Frame-Options
|
||||
* Vad är "HTTP actions"? Lista alla "HTTP actions" du känner till och förklara dem.
|
||||
|
||||
#### Kodfrågor
|
||||
|
||||
*Fråga: Vad är värdet av `foo`?*
|
||||
```javascript
|
||||
modulo(12, 5) // 2
|
||||
var foo = 10 + '20';
|
||||
```
|
||||
|
||||
*Fråga: Hur skulle du få det här att fungera?*
|
||||
```javascript
|
||||
add(2, 5); // 7
|
||||
add(2)(5); // 7
|
||||
```
|
||||
|
||||
Fråga: Vilket värde returneras från nedanstående?
|
||||
```javascript
|
||||
"i'm a lasagna hog".split("").reverse().join("");
|
||||
```
|
||||
**Svar: "goh angasal a m'i"**
|
||||
|
||||
*Fråga: Vad är värdet av `window.foo`?*
|
||||
```javascript
|
||||
( window.foo || ( window.foo = "bar" ) );
|
||||
```
|
||||
**Svar: "bar"** *Bara om `window.foo` var "falsey", annars skulle den behålla sitt värde.*
|
||||
|
||||
|
||||
*Fråga: Vad kommer de två alerterna att ropa ut?*
|
||||
```javascript
|
||||
var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);
|
||||
var foo = "Hello";
|
||||
(function() {
|
||||
var bar = " World";
|
||||
alert(foo + bar);
|
||||
})();
|
||||
alert(foo + bar);
|
||||
```
|
||||
**Svar: "Hello World" & ReferenceError: bar is not defined**
|
||||
|
||||
|
||||
*Fråga: Vad är värdet av `foo.length`?*
|
||||
```javascript
|
||||
|
|
@ -192,26 +205,24 @@ var foo = [];
|
|||
foo.push(1);
|
||||
foo.push(2);
|
||||
```
|
||||
**Svar: `2`**
|
||||
|
||||
####[[⬆]](#toc) <a name='fun'>Roliga frågor:</a>
|
||||
*Fråga: Vad är värdet av `foo.x`?*
|
||||
```javascript
|
||||
var foo = {n: 1};
|
||||
var bar = foo;
|
||||
foo.x = foo = {n: 2};
|
||||
```
|
||||
|
||||
* Nämn en cool sak du kodat nyligen. Vad har du byggt som du är stolt över?
|
||||
#### Roliga frågor:
|
||||
|
||||
* Nämn en cool sak du kodat nyligen.
|
||||
* Nämn några delar som du gillar hos de utvecklarverktyg du använder?
|
||||
* Har du några egna projekt som du sköter om? I sådana fall vilken typ av projekt?
|
||||
* Vilken är din favoritfunktion i Internet Explorer?
|
||||
* Hur gillar du ditt kaffe?
|
||||
|
||||
####[[⬆]](#toc) <a name='references'>Andra bra resurser:</a>
|
||||
#### Bidragande skribenter:
|
||||
|
||||
* http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before
|
||||
* http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/
|
||||
* http://css-tricks.com/interview-questions-css/
|
||||
* http://davidshariff.com/quiz/
|
||||
* http://blog.sourcing.io/interview-questions
|
||||
* http://www.toptal.com/javascript/interview-questions
|
||||
* http://www.sitepoint.com/5-typical-javascript-interview-exercises/
|
||||
* http://www.sitepoint.com/5-javascript-interview-exercises/
|
||||
Det här dokumentet startades 2009 som ett samarbete mellan [@paul_irish](https://twitter.com/paul_irish) [@bentruyman](https://twitter.com/bentruyman) [@cowboy](https://twitter.com/cowboy) [@ajpiano](https://twitter.com/ajpiano) [@SlexAxton](https://twitter.com/slexaxton) [@boazsender](https://twitter.com/boazsender) [@miketaylr](https://twitter.com/miketaylr) [@vladikoff](https://twitter.com/vladikoff) [@gf3](https://twitter.com/gf3) [@jon_neal](https://twitter.com/jon_neal) [@sambreed](https://twitter.com/sambreed) och [@iansym](https://twitter.com/iansym).
|
||||
|
||||
####[[⬆]](#toc) <a name='license'>Licens:</a>
|
||||
|
||||
Copyright 2012 av Darcy Clarke, släppt under [MIT-licensen](http://opensource.org/licenses/MIT). Se filen LICENSE för detaljer.
|
||||
Det har sedan dess fått bidrag från över [100 utvecklare](https://github.com/h5bp/Front-end-Developer-Interview-Questions/graphs/contributors).
|
||||
|
|
|
|||
Loading…
Reference in New Issue