├── French-WIP └── README_FR.md ├── Italian └── README_IT.md ├── Korean ├── README_KR.md └── Reference_KR.md ├── README.md └── Spanish └── README_ES.md /French-WIP/README_FR.md: -------------------------------------------------------------------------------- 1 | # QUESTIONNAIRE DE RECRUTEMENT 2 | 3 | @version 1.0 4 | 5 | ## Contributors 6 | 7 | @bentruyman (http://bentruyman.com/), @roger_raymond (http://twitter.com/iansym), @ajpiano (http://ajpiano.com/), @paul_irish (http://paulirish.com/), @SlexAxton (http://alexsexton.com/), @boazsender (http://boazsender.com/), @miketaylr (http://miketaylr.com/), @vladikoff (http://vladfilippov.com/), @gf3 (http://gf3.ca/), @jon_neal (http://twitter.com/jon_neal), @wookiehangover (http://wookiehangover.com/) and @darcy_clarke (http://darcyclarke.me) 8 | 9 | ## General Questions: 10 | 11 | * Êtes-vous sur Twitter ? 12 | * Si oui, qui suivez-vous ? 13 | * Êtes-vous sur GitHub ? 14 | * Si oui, donnez quelques exemples de dépôt que vous suivez. 15 | * A quels blogs êtes vous abonné ? 16 | * Quel logiciel de gestion de versions avez-vous déjà utilisé ? (Git, SVN etc.) 17 | * Quel est votre environnement de développement préféré ? (OS, Editor, Browsers, Tools etc.) 18 | * Pouvez-vous décrire votre workflow lorsque vous créez une page web ? 19 | * Pouvez-vous décrire la différence entre amélioration progressive et dégradation progressive ? 20 | * Un point bonus si vous décrivez des méthodes de détection 21 | * Expliquez ce que le terme "HTML sémantique" signifie. 22 | * Quel naviguateur et outils de débogage web utilisez-vous ? 23 | * Comment optimisez vous les performances de vos page web (assets/resources) ? 24 | * Énumérez quelques solutions comme : 25 | * La concaténation des fichiers 26 | * La minification des fichiers 27 | * L'utilisation d'un Content Delivery Network (CDN) 28 | * La mise en cache 29 | * etc… 30 | * Pourquoi est-il préférable de disposer ses assets sur des domaines différents ? 31 | * Combien de ressources différentes un navigateur peut télécharger à partir d'un même domaine à un instant T ? 32 | * Donnez 3 façons qui permettent de réduire le temps de chargement d'une page. (perçu ou réel) 33 | * Si vous démarrez sur un projet existant, que votre prédécesseur a utilisé des tabulations pour indenter son code et que vous utilisez des espaces, que faites-vous ? 34 | * Vous Proposez d'utiliser quelque chose comme EditorConfig (http://editorconfig.org) 35 | * Vous Restez fidèle aux conventions 36 | * `issue :retab! command` 37 | * Développez un simple slideshow 38 | * Un point bonus si vous le faites sans JS 39 | * Quel outils utilisez vous pour tester la performance de votre code ? 40 | * JSPerf (http://jsperf.com/) 41 | * Dromaeo (http://dromaeo.com/) 42 | * etc… 43 | * Si vous pouviez maitriser parfaitement une technologie cette année, laquelle serait-ce ? 44 | * Expliquez l'importance des standards et des organisations les édictant. 45 | 46 | ## Questions spécifiques à HTML : 47 | 48 | * Qu'est-ce qu'un `doctype` fait, et combien pouvez-vous en nommer ? 49 | * Quelle est la différence entre les modes `standard` et `quirks` 50 | * Quelles sont les limitations des pages XHTML ? 51 | * Y a t'il des problèmes à envoyer des pages avec le content-type `application/xhtml+xml` ? 52 | * Comment servez vous une page avec du contenu multilingue ? 53 | * À quoi devez-vous faire attention quand vous designez ou développez des pages pour des sites multilingues ? 54 | * Pouvez vous utliser une syntaxe XHTML en HTML5 ? 55 | * Comment utilisez vous du XML en HTML5 ? 56 | * À quoi servent les `data-` attributes ? 57 | * Que sont les modèles de contenus en HTML4, et diffèrent-ils de HTML5 ? 58 | * Si l'on considère que HTML5 est une plateforme web ouverte, quels sont les briques de base de HTML5 ? 59 | * Décrivez la différence entre cookies, sessionStorage, et localStorage. 60 | 61 | ## Questions spécifiques à Javascript : 62 | * Quelles sont les librairies Javascript que vous avez utilisé ? 63 | * En quoi Javascript est-il différent de Java ? 64 | * Qu'est-ce qu'une hashTable ? 65 | * Que sont les variables `undefined` et `undeclared` ? 66 | * Qu'est-ce qu'une closure, et pourquoi / comment en utiliseriez vous une ? 67 | * Votre patten favori pour les créer ? (seulement pour les IIFEs, fonctions-expressions évoquées immédiatement) 68 | * Quel est un cas d'utilisation typique pour une fonction anonyme ? 69 | * Expliquer les pattern Javascript de "Module", et quand vous l'utiliseriez. 70 | * Un point bonus si vous parlez de namespacing 71 | * Que se passe t'il si vos modules ne sont pas namespacés ? 72 | * Comment organisez vous votre code (pattern modulaire, héritage classique ?) 73 | * Quelle est la différence entre objets hôtes et objets natifs ? 74 | * Différence entre : 75 | ```javascript 76 | function Person(){} 77 | var person = Person() // et 78 | var person = new Person() 79 | ``` 80 | * Quelle est la différence entre `.call` et `.apply` ? 81 | * Expliquez `Function.prototype.bind` ? 82 | * Quand optimisez-vous votre code ? 83 | * Pouvez vous expliquer comment fonctionne l'héritage en Javascript ? 84 | * Quand utiliseriez-vous `document.write()` ? 85 | * La plupart des pubs utilisent encore `document.write()` même si son utilisation est découragée. 86 | * Quelle est la différence entre détection de feature, inférence de feature, et l'utilisation de l'User Agent ? 87 | * Expliquez un call AJAX dans le plus grand détail possible 88 | * Expliquez comment JSONP fonctionne (et en quoi ca n'est pas réellement de l'AJAX) 89 | * Avez vous déja utilisé fait du templating en Javascript ? 90 | * Si oui, quelles librairies avez vous utilisé (Mustache.js, Handlebars etc…) 91 | * Expliquez "hoisiting". 92 | * Quest-ce que le FOUC, comment l'évitez vous ? 93 | * Décrivez le bubbling d'évênement. 94 | * Quelle est la différence entre un "attribut" et une "propriété" 95 | * Pourquoi étendre les objets natifs Javascript n'est pas une bonne idée ? 96 | * Pourquoi étendre les objets natifs est une bonne idée ? 97 | * Quelle est la différence entre les évenements `load` et `ready` du document? 98 | * Quelle est la différence entre `==` et `===` ? 99 | * Expliquez comment vous récupéreriez un paramètre de querystring de l'URL du browser. 100 | * Expliquez la politique d'origine commune et ses implication en Javascript. 101 | * Expliquez la délégation d'évênement. 102 | * Expliquez les patterns d'héritage en Javascript. 103 | * Faites fonctionner ceci : 104 | ```javascript 105 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 106 | ``` 107 | * Décrivez une stratégie de mémoization (pour éviter la répétition des calculs) en Javascript. 108 | * Qu'est-que qu'une instruction 'Ternaire', et qu'indique le mot 'Ternaire' 109 | * Qu'est-ce que l'arité d'une fonction ? 110 | 111 | ## Exemples de code JS 112 | 113 | ```javascript 114 | ~~3.14 115 | ``` 116 | Question: Que retourne ce code ? 117 | **Réponse: 3** 118 | 119 | ```javascript 120 | "je suis un bouffeur de lasagne".split("").reverse().join(""); 121 | ``` 122 | Question: Que retourne ce code ? 123 | **Réponse: "engasal ed rueffuob nu sius ej"** 124 | 125 | ```javascript 126 | ( window.foo || ( window.foo = "bar" ) ); 127 | ``` 128 | Question: Que retourne window.foo? 129 | **Réponse: "bar"** 130 | seulement si window.foo n'était pas défini ou faux, autrement il garde sa valeur 131 | 132 | ```javascript 133 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 134 | ``` 135 | Question: Que se passe t'il à l'éxécution de ce code ? 136 | **Réponse: "Hello World" & ReferenceError: bar is not defined** 137 | 138 | ```javascript 139 | var foo = []; 140 | foo.push(1); 141 | foo.push(2); 142 | ``` 143 | Question: Quelle est la valeur de foo.length ? 144 | **Réponse: `2` 145 | 146 | ```javascript 147 | var foo = {}; 148 | foo.bar = 'hello'; 149 | ``` 150 | Question: Quelle est la valeur de foo.length ? 151 | **Réponse: `undefined` 152 | 153 | 154 | ## Questions spécifiques à jQuery : 155 | 156 | * Expliquez le chainage 157 | * Expliquez 'deferred' 158 | * Décrivez des optimisations spécifiques à jQuery que vous pouvez implémenter. 159 | * Que fait `.end()` ? 160 | * Pourquoi et comment restreindriez-vous un evenement bindé à un un namespace ? 161 | * Nommez 4 valeurs différentes que vous pouvez passer à la méthode jQuery. 162 | * Sélecteur (string), HTML (string), Callback (function), HTMLElement, objet, tableau, tableau d'éléments, objet jQuery, etc… 163 | * Qu'est-ce que la queue d'effets (fx queue) ? 164 | * Quelle est la différence entre `.get()`, `[]`, et `.eq()` ? 165 | * Quelle est la différence entre `.bind()`, `.live()`, et `.delegate()`? 166 | * Quelle est la différence entre `$` et `$.fn`? Ou bien seulement : qu'est-ce que `$.fn`. 167 | * Optimisez ce sélecteur : 168 | ```javascript 169 | $(".foo div#bar:eq(0)") 170 | ``` 171 | 172 | ## Questions spécifiques CSS : 173 | 174 | * Décrivez ce que fait un fichier CSS Reset, et pourquoi il est utile. 175 | * Décrivez les Floats, et comment ils fonctionnent. 176 | * Quelles sont les différentes méthodes de clearing des floats, et laquelle est appropriée pour chaque contexte ? 177 | * Expliquez les sprites CSS, et comment vous les implémenteriez sur une page ou un site. 178 | * Quelles sont vos techniques favorites de remplacement d'images, et comment les utilisez vous ? 179 | * hacks de propriétés CSS, fichiers .css inclus avec des commentaires conditionnels, ou autre ? 180 | * Comment servez vous vos pages pour les browsers aux fonctionnalités réduites ? 181 | * Quelles techniques / process utilisez vous ? 182 | * Quelles sont les différentes manières de masquer du contenu (en le laissant disponible pour les lecteurs d'écran) ? 183 | * Avez vous déja utilisé un grid system, et si oui, lequel préférez-vous ? 184 | * Avez vous déja implémenté des media queries, ou des layouts/CSS spécifiques aux mobiles ? 185 | * Déja touché au styling de SVG ? 186 | * Comment optimisez vous vos pages pour le print ? 187 | * Quelques trucs pour écrire du CSS efficace ? 188 | * Utilisez vous des préprocesseurs CSS ? (SASS, Compass, Stylus, LESS) 189 | * Si oui, décrivez ce que vous aimez et n'aimez pas des préprocesseurs que vous avez utilisé. 190 | * Comment implémenteriez-vous une créa web qui utilise des typos non standard ? 191 | * Webfonts (services comme: Google Webfonts, Typekit etc.) 192 | * Expliquez comment un browser détermine ce qui matche un sélecteur CSS. 193 | 194 | 195 | 196 | ## Questions optionnelles, pour le geste. 197 | 198 | * Quel est le tuc le plus cool que vous ayez jamais codé, de quoi êtes vous le plus fier ? 199 | * Connaissez vous le signe de gang du HTML5 ? 200 | * Êtes vous ou avez vous déja été sur un bateau. 201 | * Quelles sont vos parties favorites des outils de développement que vous utilisez. 202 | * Avez vous des projets chouchous ? Quel genre ? 203 | * Expliquez 'cornify' 204 | * Sur un bout de papier, écrivez les lettres A B C D E verticalement. 205 | Maintenant mettez les en ordre descendant sans écrire une ligne de code. 206 | * Regardez si ils retournent le bout de papier. 207 | * Pirate ou Ninja. 208 | * Bonus si c'est une doublette, et si il y a une bonne raison. (+2 pour des Zombies Singes Ninja Pirates) 209 | * Si c'était pas du Dev, vous feriez quoi ? 210 | * Ou est Carmen San Diego ? 211 | * Indice : La réponse est toujours fausse. 212 | * Quelle est votre feature favorite de IE 213 | * Complétez cette phrase Brendan Eich et Doug Crockford sont les __________ de javascript. 214 | * jQuery : superbe librairie, ou la meilleure ? Discutez. 215 | -------------------------------------------------------------------------------- /Italian/README_IT.md: -------------------------------------------------------------------------------- 1 | #QUESTIONARIO COLLOQUIO DI LAVORO 2 | 3 | @version 1.0 4 | 5 | ##Collaboratori 6 | 7 | @bentruyman (http://bentruyman.com/), @roger_raymond (http://twitter.com/iansym), @ajpiano (http://ajpiano.com/), @paul_irish (http://paulirish.com/), @SlexAxton (http://alexsexton.com/), @boazsender (http://boazsender.com/), @miketaylr (http://miketaylr.com/), @vladikoff (http://vladfilippov.com/), @gf3 (http://gf3.ca/), @jon_neal (http://twitter.com/jon_neal), @wookiehangover (http://wookiehangover.com/) and @darcy_clarke (http://darcyclarke.me) 8 | 9 | ## Domande Generali: 10 | 11 | * Sei su Twitter? 12 | * Se sì, chi segui su Twitter? 13 | * Sei su GitHub? 14 | * Se sì, quali sono alcuni esempi di repository che segui 15 | * Che blog segui? 16 | * Che sistema di controllo di versione [*version control*] hai usato (Git, SVN, ecc...)? 17 | * Qual è il tuo ambiente di sviluppo preferito? (Sistema Operativo, Editor di testo, Browser, Strumenti ecc.) 18 | * Puoi descrivere il tuo metodo di lavoro quando crei una pagina web? 19 | * Puoi descrivere la differenza tra miglioramento progressivo [*progressive enhancement*] e degradazione elegante [*graceful degradation*]? 20 | * Punti bonus se descrive il rilevamento di funzionalità [*feature detection*] 21 | * Spiega cosa significa "HTML Semantico". 22 | * In quale browser sviluppi principalmente e quali strumenti di sviluppo usi? 23 | * Come ottimizzeresti le risorse/asset di un sito? 24 | * Mi aspetto svariate soluzioni che possono includere: 25 | * Concatenazione dei file 26 | * Minimizzazione [*minification*] dei file 27 | * Uso di CDN 28 | * Caching 29 | * ecc... 30 | * Perché è meglio servire file per il sito da più domini? 31 | * Quante risorse scaricherà per volta un browser da uno specifico dominio? 32 | * Citami 3 modi per diminuire il caricamento della pagina. (percepito o effettivo tempo di caricamento) 33 | * Se cominci a lavorare su un progetto già iniziato dove vengono usati tab invece di spazi, cosa fai? 34 | * Suggerisci di usare per il progetto qualcosa tipo EditorConfig (http://editorconfig.org) 35 | * Ti adatti alle convezioni (rimani coerente) 36 | * `issue :retab! command` 37 | * Scrivi una semplice pagina con slideshow 38 | * Punti bonus se non utilizza JS. 39 | * Che strumenti usi per testare le prestazioni del tuo codice? 40 | * JSPerf (http://jsperf.com/) 41 | * Dromaeo (http://dromaeo.com/) 42 | * ecc... 43 | * Se potessi approfondire una tecnologia quest'anno, quale sarebbe? 44 | * Spiega l'importanza degli standard e degli enti di normazione. 45 | 46 | ## Domande Specifiche su HTML: 47 | 48 | * Cosa fa il `doctype`, e quanti me ne puoi citare? 49 | * Qual è la differenza tra standard mode e quirks mode? 50 | * Quali sono le limitazioni quando servi pagine XHTML? 51 | * Ci sono dei problemi a servire le pagine come `application/xhtml+xml`? 52 | * Come servi una pagina con il contenuto in più lingue? 53 | * A cosa devi far attenzione quando progetti o sviluppi siti multilingua? 54 | * Si può usare la sintassi XHTML in HTML5? 55 | * Come usi XML in HTML5? 56 | * Per cosa sono utili gli attributi `data-`? 57 | * Quali sono i modelli di contenuto [*content models*] in HTML4 e sono differenti in HTML5? 58 | * Considera HTML5 come una piattaforma web aperta. Quali sono i mattoni di HTML5? 59 | * Descrivi le differenze tra cookie, sessionStorage e localStorage. 60 | 61 | ## Domande Specifiche su JS 62 | 63 | * Quali librerie JavaScript hai usato? 64 | * Come è diverso JavaScript da Java? 65 | * Cosa è una hashtable? 66 | * Cosa sono le variabili `undefined` e `undeclared`? 67 | * Cosa è una chiusura [*closure*], e come/perché ne useresti una? 68 | * Il tuo pattern preferito usato per crearle? argyle (Applicabile solo a espressioni di funzione immediatamente eseguite [*IIFE*]) 69 | * Qual è l'uso tipico di una funzione anonima? 70 | * Spiega il "JavaScript module pattern" e quando lo useresti. 71 | * Punti bonus se menziona namespacing pulito. 72 | * E se i tuoi moduli sono senza namespace? 73 | * Come organizzi il tuo codice? (module pattern, ereditarietà classica?) 74 | * Qual è la differenza tra oggetti host e oggetti nativi? 75 | * Differenza tra: 76 | ```javascript 77 | function Person(){} var person = Person() var person = new Person() 78 | ``` 79 | * Qual è la differenza tra `.call` e `.apply`? 80 | * Spiega `Function.prototype.bind`? 81 | * Quando ottimizzi il tuo codice? 82 | * Puoi spiegare come funziona l'ereditarietà in JavaScript? 83 | * Quando useresti `document.write()`? 84 | * La maggior parte delle pubblicità usa `document.write()` sebbene il suo utilizzo venga malvisto 85 | * Qual è la differenza tra il rilevamento di funzionalità [*feature detection*], la deduzione di funzionalità [*feature inference*], e l'uso della stringa UA 86 | * Spiega AJAX nel modo più dettagliato possibile 87 | * Spiega come funziona JSONP (e come non è veramente AJAX) 88 | * Hai mai usato il templating JavaScript? 89 | * Se se sì, quali librerie hai utilizzato? (Mustache.js, Handlebars ecc...) 90 | * Spiega "hoisting". 91 | * Cosa è il FOUC? Come eviti il FOUC? 92 | * Descrivi l'event bubbling. 93 | * Qual è la differenza tra un "attribute" e una "property"? 94 | * Perché extending built negli oggetti JavaScript non è una buona idea? 95 | * Perché extending built è una buona idea? 96 | * Differenza tra l'evento document load e l'evento document ready? 97 | * Qual è la differenza tra `==` e `===`? 98 | * Spiega come prenderesti il parametro query string dall'URL della finestra del browser. 99 | * Spiega la policy "stessa origine" [*same-origin*] per quanto riguarda JavaScript. 100 | * Spiega l'event delegation. 101 | * Descrivi i pattern di ereditarietà in JavaScript. 102 | * Cosa ottieni da: 103 | ```javascript 104 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 105 | ``` 106 | * Descrivi la tecnica della memoizzazione (evitando la ripetizione del calcolo) in JavaScript. 107 | * Perché è chiamato operatore Ternario, cosa indica la parola "Ternario"? 108 | * Cosa è l'arietà di una funzione? 109 | 110 | ## Esempi di Codice JS: 111 | 112 | ```javascript 113 | ~~3.14 114 | ``` 115 | Domanda: Quale valore viene ritornato dalla dichiarazione qui sopra? 116 | **Risposta: 3** 117 | 118 | ```javascript 119 | "i'm a lasagna hog".split("").reverse().join(""); 120 | ``` 121 | Domanda: Quale valore viene ritornato dalla dichiarazione qui sopra? 122 | **Risposta: "goh angasal a m'i"** 123 | 124 | ```javascript 125 | ( window.foo || ( window.foo = "bar" ) ); 126 | ``` 127 | Domanda: Qual è il valore di window.foo? 128 | **Risposta: "bar"** 129 | solo se window.foo era falso altrimenti manterrà il suo valore. 130 | 131 | ```javascript 132 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 133 | ``` 134 | Domanda: Qual è il risultato dei due alert qui sopra? 135 | **Risposta: "Hello World" & ReferenceError: bar is not defined** 136 | 137 | ```javascript 138 | var foo = []; 139 | foo.push(1); 140 | foo.push(2); 141 | ``` 142 | Domanda: Qual è il valore di foo.length? 143 | **Risposta: `2` 144 | 145 | ```javascript 146 | var foo = {}; 147 | foo.bar = 'hello'; 148 | ``` 149 | Domanda: Qual è il valore di foo.length? 150 | **Risposta: `undefined` 151 | 152 | 153 | ## Domande Specifiche su jQuery: 154 | 155 | * Spiega la "concatenazione" [*chaining*]. 156 | * Spiega "deferreds". 157 | * Quali sono alcune ottimizzazioni specifiche per jQuery che puoi implementare? 158 | * Cosa fa `.end()`? 159 | * Come, e perché, assegneresti un namespace al gestore di un evento? 160 | * Citami 4 differenti valori che puoi passare al metodo jQuery. 161 | * Selettore [*selector*] (testo), HTML (testo), Callback (funzione), HTMLElement, oggetti, array, element array, oggetto jQuery, ecc... 162 | * Cosa è la coda di effetti [*fx queue*]? 163 | * Qual è la differenza tra `.get()`, `[]`, e `.eq()`? 164 | * Qual è la differenza tra `.bind()`, `.live()`, e `.delegate()`? 165 | * Qual è la differenza tra `$` e `$.fn`? O anche solo cosa è `$.fn`. 166 | * Ottimizza questo selettore: 167 | ```javascript 168 | $(".foo div#bar:eq(0)") 169 | ``` 170 | 171 | ## Domande Specifiche su CSS: 172 | 173 | * Descrivi cosa fa un file CSS "reset" e in cosa è utile. 174 | * Descrivi i Float e come funzionano. 175 | * Quali sono le varie tecniche di clearing e quale è appropriata per quale contesto? 176 | * Spiega gli sprite CSS, e come li implementeresti in una pagina o in un sito. 177 | * Quali sono le tue tecniche di sostituzione immagini [*image replacement*] preferite e quale usi quando? 178 | * Hack delle proprietà CSS, file .css inclusi con condizioni, o... altro? 179 | * Come servi le tue pagine per i browser con funzionalità limitate? 180 | * Che tecniche/processi usi? 181 | * Quali sono i vari modi per nascondere visualmente il contenuto (e renderlo disponibile solo per gli screen reader)? 182 | * Hai mai usato un sistema di griglie [*grid system*], e se sì, qual è il tuo preferito? 183 | * Hai mai usato o implementato media queries o CSS/layout specifici per mobile? 184 | * Familiarità con lo styling SVG? 185 | * Come ottimizzi le tue pagine web per la stampa? 186 | * Quali sono alcuni dei "trucchi" per scrivere CSS efficiente? 187 | * Usi preprocessori CSS? (SASS, Compass, Stylus, LESS) 188 | * Se sì, descrivi cosa ti piace e cosa non ti piace dei preprocessori CSS che hai usato. 189 | * Come implementeresti una grafica web che usa font non standard? 190 | * Webfonts (servizi di font tipo: Google Webfonts, Typekit, ecc...) 191 | * Spiega come un browser determina quali elementi corrispondono a un selettore CSS. 192 | 193 | ## Domande Opzionali per divertimento: 194 | 195 | * Qual è la cosa più bella che hai mai sviluppato, di cosa sei più orgoglioso? 196 | * Conosci l'HTML5 gang sign? 197 | * Sei o sei mai stato su una barca. 198 | * Quali sono le tue parti preferite degli strumenti di sviluppo che usi? 199 | * Hai qualche interesse, pallino? Di che tipo? 200 | * Spiega il significato di "cornify". 201 | * Su un pezzo di carta, scrivi le lettere A B C D E in fila verticale. Ora mettile in ordine decrescente senza scrivere neanche una linea di codice. 202 | * Aspetta e vedi se girano il foglio sottosopra 203 | * Pirata o Ninja? 204 | * Punti bonus se è una combinazione e se è stata data una buona motivazione (+2 per scimmia ninja pirata zombie) 205 | * Se non fosse per lo sviluppo web, cosa staresti facendo ora? 206 | * Che fine ha fatto Carmen Sandiego? 207 | * Suggerimento: la risposta è sempre sbagliata) 208 | * Qual è la tua feature preferita di Internet Explorer? 209 | * Completa questa frase: Brendan Eich e Doug Crockford sono i __________ di javascript. 210 | * jQuery: un'ottima libreria o la migliore libreria? Discuti. -------------------------------------------------------------------------------- /Korean/README_KR.md: -------------------------------------------------------------------------------- 1 | #면접 문제 은행 2 | 3 | @version 1.0 4 | 5 | ##Contributors 6 | 7 | @bentruyman (http://bentruyman.com/), @roger_raymond (http://twitter.com/iansym), @ajpiano (http://ajpiano.com/), @paul_irish (http://paulirish.com/), @SlexAxton (http://alexsexton.com/), @boazsender (http://boazsender.com/), @miketaylr (http://miketaylr.com/), @vladikoff (http://vladfilippov.com/), @gf3 (http://gf3.ca/), @jon_neal (http://twitter.com/jon_neal), @wookiehangover (http://wookiehangover.com/) and @darcy_clarke (http://darcyclarke.me) 8 | 9 | ##한국어 번역(한국 상황에 맞춰서 약간 수정 하였습니다.) 10 | @ohgyun(http://ohgyun.com), @nerdog, @javarouka, @Songhun(http://songhun.blogspot.com) 11 | 12 | ## 일반적인 질문: 13 | 14 | * Twitter,Facebook 혹은 Me2day등의 SNS를 사용하시나요? 15 | * 사용한다면, 누구를 팔로우 하고 있나요? 16 | * GitHub을 사용하시나요? 17 | * 사용한다면, 어떤 프로젝트를 Watch 혹은 Fork하시나요? 18 | * 자주 보는 Blog가 있습니까? 19 | * 버전 관리 시스템은 어떤 것들을 사용해보셨습니까? 20 | * 선호하는 개발 환경은 무엇입니까? (운영체제, 에디터, 브라우저, 도구 등등) 21 | * 당신이 웹 페이지를 만들 때의 과정을 설명 해주실 수 있을까요? 22 | * 점진적 향상법(progressive enhancement)과 우아한 성능저하법(graceful degradation)의 차이를 설명하실 수 있습니까? 23 | * "누구도 성공하지 못합니다" 라고 말하면 보너스 포인트를 주세요. 24 | * 각 특색을 설명을 한다면, 더 높은 보너스 포인트를 주세요. 25 | * "시멘틱 HTML(Semantic HTML)"이 무엇을 뜻하는지 설명해주세요. 26 | * "최소화(minification)"가 무엇을 하는 것입니까? 27 | * 여러 도메인을 이용하여 서버 사이트 데이터를 제공하는 것이 더 나은 이유는 무엇인가요? 28 | * 브라우저가 한 번에 1개의 도메인에서 다운로드 받는 리소스는 몇 개 인가요? 29 | * 만약에 디자인을 표현하기 위해 8개의 다른 Stylesheet를 가지고 있다면, 사이트에서는 어떻게 통합하실 건가요? 30 | * 파일의 연결법을 찾아내세요. 31 | * Build system을 이용한 결합없이, `@import`를 사용하면 점수를 깎으세요. 32 | * 당신이 프로젝트에 합류했습니다. 근데 그들은 Tab을 이용하고, 당신은 Sapce를 사용했습니다. 어떻게 하실건가요? 33 | * `:retab!` 명령어를 아는지 확인 34 | * 간단한 Slideshow 페이지를 만들어보세요. 35 | * Javascript를 사용하지 않고 만들었다면, 보너스 점수가 있습니다. 36 | * 당신의 코드의 성능을 테스트하기 위해서 사용하는 도구가 무엇입니까? 37 | * 올해 당신이 익히고 싶은 기술이 있다면, 그것은 무엇입니까? 38 | * 페이지 로딩 시간을 줄이는 3가지 방법은? 39 | * 표준의 중요함을 설명하세요. 40 | 41 | ## HTML에 관련된 질문들: 42 | 43 | * `doctype`이 무엇을 하는 것이고, 몇 번 지정할 수 있나요? 44 | * 표준모드(standards mode)와 쿽스모드(quirks mode)의 다른 점은 무엇인가요? 45 | * XHTML을 이용한 페이지의 한계점은 무엇이 있나요? 46 | * `application/xhtml+xml`으로 지정한 페이지에 어떠한 문제가 있나요? 47 | * 다국어가 포함된 페이지는 어떤 방식으로 제공하나요? 48 | * HTML5에서 XHTML문법을 사용할 수 있나요? HTML5에서 XML을 어떻게 사용하나요? 49 | * `data-`속성은 무엇을 하는 것인가요? 50 | * HTML4에서 콘텐츠 모델(content models)은 무엇이며, HTML5의 그것과 다른 점은 무엇인가요? 51 | * HTML5를 오픈웹플랫폼(open web platform)으로 생각해본다면, 어떤 것들로 구성돼 있을까요? 52 | * 쿠키(Cookies)와 세션저장소(sessionStorage)와 로컬저장소(localStorage)의 차이점을 설명해주세요. 53 | 54 | ## Javascript에 관련된 질문들: 55 | 56 | * 사용해 본 Javascript 라이브러리들을 말씀해주세요. 57 | * Java와 Javascript의 다른 점은 무엇인가요? 58 | * `undefined`와 `undeclared` 변수는 무엇인가요? 59 | * 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요. 60 | * 클로져를 만들 때 선호하는 패턴은 무엇인가요? argyle (IIFEs에만 적용할 수 있다) 61 | * 익명함수(anonymous functions)는 주로 어떤 상황에서 사용하나요? 62 | * "Javascript 모듈 패턴(Javascript module pattern)"이 무엇인지 설명을 해주시고, 언제 사용하는지도 말씀해주시기 바랍니다. 63 | * "네임스페이스(namespacing)"에 대해서 언급을 하면, 보너스 포인트가 있습니다. 64 | * 당신의 모듈이 네임스페이스가 없는 상황이라면? 65 | * 당신의 코드를 어떻게 구성하는지?(모듈 패턴, Class기반 상속?) 66 | * 호스트 객체(Host Objects)와 네이티브 객체(Native Objects)의 차이점은 무엇인가요? 67 | * 다음 코드의 차이점은 무엇인가요? 68 | ```javascript 69 | function Person(){} var person = Person() var person = new Person() 70 | ``` 71 | * `.call`과 `.apply`의 차이점은 무엇인가요? 72 | * `Function.prototype.bind`을 설명 하시오 73 | * 코드 최적화를 하는 시점은 언제인가요? 74 | * Javascript에서 어떻게 상속을 하는지 설명할 수 있나요? 75 | * "누구도 할 수 없어요" 같은 재밌는 대답 시에 보너스 포인트가 있습니다. 76 | * 안되는 이유에 대해서 설명을 시도한다면, 더 많은 점수를 주세요. 77 | * `document.write()`를 언제 사용하시나요? 78 | * 정답 : 1999년 - 초보개발자를 걸러내기 위한 시절 79 | * UA문자열을 이용하여 기능 검출(feature detection)과 기능 추론(feature inference)의 차이점을 설명 하시오. 80 | * AJAX에 관해 가능한 자세히 설명하세요. 81 | * JSONP가 어떻게 동작 되는지 설명하세요.(그리고,실제 AJAX와 어떻게 다른지 설명하세요.) 82 | * 기존에 Javascript 템플릿을 사용한 적이 있나요? 만약에 있다면, 어떠한 방식으로 사용했는지 말씀해주세요. 83 | * "호이스팅(Hoisting)"에 대해서 설명 하시오. 84 | * FOUC가 무엇이며 FOUC를 어떻게 방지하나요? 85 | * 이벤트 버블링(Event Bubbling)에 대해서 설명하세요. 86 | * "속성(Attribute)"와 "요소(property)"의 차이가 무엇인가요? 87 | * Javascript 객체를 확장하는 것이 좋지 않은 이유는 무엇인가요? 88 | * Document Load 이벤트와 Ready 이벤트의 차이가 무엇인가요? 89 | * `==`와 `===`의 차이점은 무엇인가요? 90 | * 브라우저의 URL에서 파라메터를 얻을 수 있는 방법에 대해서 설명하세요. 91 | * Javascript의 "동일출처정책(the same-origin policy)"에 대해서 설명하세요. 92 | * 이벤트 딜리게이션(Event Delegation)에 대해서 설명하세요. 93 | * Javascript의 상속패턴(inheritance patterns)에 대해서 설명하세요. 94 | * 다음 코드를 동작하게 만드세요. 95 | ```javascript 96 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 97 | ``` 98 | * Javascript에서 메모이제이션(memoization, 중복 계산 방지)에 대한 전략을 설명해주세요. 99 | * 삼항식(Ternary statement)을 사용하는 이유는 무엇이고, 그것을 표현하기 위한 연산자 단어는 무엇인가요? 100 | * arity는 어떠한 함수인가요? 101 | 102 | ## Javascript 코드 예제: 103 | 104 | ```javascript 105 | >~~3.14 106 | ``` 107 | 문제: 위 상황의 결과 값은? 108 | 109 | **답: 3** 110 | 111 | ```javascript 112 | "i'm a lasagna hog".split("").reverse().join(""); 113 | ``` 114 | 문제: 위 상황의 결과 값은? 115 | 116 | **답: "goh angasal a m'i"** 117 | 118 | ```javascript 119 | ( window.foo || ( window.foo = "bar" ) ); 120 | ``` 121 | 문제: window.foo의 값은 무엇인가요? 122 | 123 | **답: "bar"** 124 | 125 | 처음에 window.foo는 false, undefined 혹은 0등의 값을 가지고 있다. 126 | 127 | ```javascript 128 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 129 | ``` 130 | 문제: 어떠한 두 가지의 알럿이 나올까요? 131 | 132 | **답: "Hello World" & ReferenceError: bar is not defined** 133 | 134 | ## jQuery에 연관된 질문들: 135 | 136 | * "체이닝(Chaining)"에 대해서 설명 하세요. 137 | * `.end()`는 무엇을 하는 것입니까? 138 | * 이벤트 핸들러 선언 시, 언제 그리고 왜 namespace를 부여하는지를 설명해주세요. 139 | * 이펙트 큐(queue)라는 것은 무엇인가요? 140 | * `.get()`,`[]` 그리고 `.eq()`의 차이점이 무엇인가요? 141 | * `.bind()`,`.live()`그리고 `.delegate()`의 차이점이 무엇인가요? 142 | * `$`과 `$.fn` 차이점이 무엇인지 설명 해주시오. 혹은, `$.fn`가 무엇인지 설명해주세요. 143 | * 다음 Selector를 최적화 해주세요.: 144 | 145 | ```javascript 146 | $(".foo div#bar:eq(0)") 147 | ``` 148 | 149 | ## CSS 관련 질문들: 150 | 151 | * "reset" CSS가 무엇인지, 어떻게 유용한지 설명 해주세요. 152 | * Floats가 어떻게 동작하는지 설명해주세요. 153 | * 클리어링(Clearing) 기술에는 어떤 것들이 있으며, 어떠한 경우에 어떻게 사용하는 것이 적절한지 설명하세요. 154 | * CSS 스프라이트(CSS Sprites)를 설명하고, 페이지나 사이트를 어떻게 향상시키는지 설명하시오. 155 | * IE box model과 W3C box model의 차이점을 설명하시오. 156 | * Image Replacement를 사용해야 할 때, 선호하는 기술과 언제 사용하는지를 설명 해주세요. 157 | * CSS 요소핵(CSS property hacks)을 조건부적으로 .css파일안에 넣으시나요 혹은 다른 방식이 있나요? 158 | * 기능이 제약된 브라우저를 위해서 어떤 방식으로 페이지를 만드나요? 159 | * 어떠한 기술과 절차를 거치는지 설명하시오. 160 | * 컨텐츠를 안보이게 하는 기술들의 차이점을 설명하시오.(그리고 스크린 리더(Screen readers)에서 접근이 가능한 방법은?) 161 | * 그리드 시스템(Grid system)을 사용한 적이 있나요? 있다면 어떠한 것을 선호하나요? 162 | * 미디어 쿼리(media queries)를 사용한 적이 있나요? 혹은 모바일에 맞는 layout과 CSS를 사용한 적이 있나요? 163 | * SVG를 스타일링 하기 위한 편한 방법이 있나요? 164 | * 인쇄를 하기 위해 웹페이지를 어떻게 최적화 하나요? 165 | * 효율적인 CSS를 작성하기 위한 "비법(gotchas)"은 어떤 게 있나요? 166 | * CSS 전처리(CSS preprocessors)를 사용해보셨나요? 167 | * 그렇다면, 사용 경험에 기반해 좋았던 점과 나빴던 점을 설명해주세요. 168 | * 페이지에서 표준 폰트가 아닌 폰트 디자인을 사용할 때 어떤 방식으로 처리하시나요?(웹폰트를 제외하고) 169 | * CSS Selector가 어떠한 원리로 동작하는지 설명하시오. 170 | 171 | ## 그 외 흥미로운 질문들: 172 | 173 | * 당신이 작성한 코드 중 어떤 것을 가장 멋지고, 자랑스럽게 여기나요? 174 | * HTML5 gang sign에 대해서 아시나요? 175 | * 배를 타본 적이 있으세요? 176 | * Firebug와 Webkit Inspector에서 좋아하는 부분을 말씀해주세요. 177 | * 당신 스스로 하는 프로젝트가 있나요? 어떤 종류인가요? 178 | * "유니콘화(cornify)"의 의미를 설명해주세요. 179 | * 한장의 종이 위에, A B C D E를 차례대로 내려 쓰시오. 그다음, 코드로 작성하지 말고, 역순으로 재배치 해보세요. 180 | * 종이를 위아래를 뒤집어낼 때 까지 기다리세요. 181 | * 이것은 인터뷰의 끝에 긴장감을 풀어주고 웃음을 줄 수 있는 좋은 방법이 입니다. 182 | * 해적입니까? 닌자입니까? 183 | * 만약에 둘 다 이며, 좋은 이유를 댄다면 보너스 점수를 주세요.(좀비 몽키 해적 닌자인 경우엔 +2) 184 | * 만약에 웹개발을 안했다면, 무엇을 했었을까요? 185 | * Carmen Sandiego는 세상의 어디에 있을가요?(힌트 : 그들의 답은 항상 틀릴겁니다.) 186 | * Internet Explorer의 당신이 좋아하는 기능은 무엇입니까? 187 | * 다음 문장을 완성하세요 : Brendan Eich 와 Doug Crockford 는 Javascript의 __________ 이다. 188 | * jQuery: 훌륭한 라이브러리인가요? 최고로 좋은 라이브러리인가요? 토론하세요. 189 | -------------------------------------------------------------------------------- /Korean/Reference_KR.md: -------------------------------------------------------------------------------- 1 | ##해설집 2 | ``` 3 | 이 문서는 정답을 알려주는 문서가 아닙니다. 4 | 면접에 대한 답은 스스로가 찾아야 좋으며, 5 | 그 판단을 돕기 위한 해설서 임을 밝히는 바입니다. 6 | ``` 7 | 8 | ##기여자 9 | @Songhun(http://songhun.blogspot.com) 10 | @YiHanghee(http://blog.javarouka.me) 11 | 12 | ##일반적인 질문에 대한 참고 13 | * SNS에 대해서 물어보는 이유가 무엇일까요? 14 | 15 | ##HTML에 대한 참고 16 | * `doctype`에 대한 설명은 [Wikipedia](http://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%ED%98%95%EC%8B%9D_%EC%84%A0%EC%96%B8) 에서 찾아볼 수 있습니다. 17 | * 문서 타입에 대한 자세한 설명을 담은 블로그 ["Activating Browser Modes with Doctype"](http://hsivonen.iki.fi/doctype/) 18 | * 표준 모드는 W3C의 표준에 맞춘 구현 렌더링으로 동작하며(미세하게 다릅니다), 쿽스 모드는 다양한 브라우저 및 표준 정립 이전의 구버전 기준으로 작성된 HTML의 fallback 과 비슷합니다. 19 | * [Quirks Mode 렌더링과 DTD.](http://naradesign.net/wp/2007/03/27/118/) 20 | * [Mozilla's Quirks Mode](https://developer.mozilla.org/ko/Mozilla's_Quirks_Mode) 21 | * [XHTML 과 HTML의 차이](http://blog.wystan.net/2007/05/24/xhtml-vs-html) 블로그 포스팅에 4부작(?)으로 좋은 설명이 있네요. 22 | * application/xhtml+xml 컨텐트 타입은 브라우저에 따라 해석할 수 없기도 합니다.(IE...) 23 | * 엘리먼트의(특히 루트인 html) lang attribute 와 관련이 있을까요...? 24 | * [HTML 5 + XML = XHTML 5](http://html5doctor.com/html-5-xml-xhtml-5/), 25 | * Programer custom attribute. ex) 자동차를 엘리먼트로 나타내야 할 경우를 생각해보면 기본 html 속성으로는 부족하겠죠. 26 | * HTML4의 콘텐츠 모델이 div와 span에 id와 클래스를 입힌 inline 및 block display의 사용자 정의형이라면, HTML5는 그것을 표준화한 콘텐츠 모델. 27 | * 자세한 것은 [내용 모델(한글 by ClearBoth 팀)](http://html5.clearboth.org/content-models.html) 이쪽으로. 28 | * open web platform 이 뭘까요...? 29 | * 서버와 공유할 필요가 있는지의 여부, 저장 용량, 저장 생명주기에 따라 셋을 구분할 수 있습니다. 30 | 31 | ##Javascript에 대한 참고 32 | * 유명한 Javascript Library는 다음과 같습니다. 33 | * jQuery 34 | * Prototype.js 35 | * YUI 36 | * Ext JS 37 | * Dojo 38 | * Java와 Javascript는 Car와 Carpet의 차이와 비슷하다고 할 수 있습니다. 39 | * [Undeclared, Undefined, Null in JavaScript](http://constc.blogspot.com/2008/07/undeclared-undefined-null-in-javascript.html) 40 | * [Naver Developer에서 제공 되는 Closure설명](http://dev.naver.com/tech/ajaxui/ajaxui_2.php#a_2_2) 41 | * [Javascript anonymous functions](http://helephant.com/2008/08/23/javascript-anonymous-functions/) 42 | * [Pro Javascript Techniques(3): Anonymous Functions(한글)](http://happyzoo.tistory.com/124) 43 | 44 | ##jQuery에 대한 참고 45 | * jQeury들의 거의 모든 method들은 jQuery object를 돌려주도록 되어있습니다. 46 | * 이 특성으로 인해 같은 scope에서 일어나는 거의 모든 method들을 연결하여 정의를 할 수 가 있습니다. 47 | * Paul Irish 가 작성한 [블로그](http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/) 를 참고하시면 좋을 듯 합니다. 48 | * [.end()](http://api.jquery.com/end/) 49 | * [Namesapced Events](http://docs.jquery.com/Namespaced_Events) 50 | * [Effect queue()](http://api.jquery.com/queue/) 51 | * [Understanding jQuery Effects Queue](http://blog.bigbinary.com/2010/02/02/understanding-jquery-effects-queue.html) 52 | 53 | 54 | ##CSS 참고 55 | 56 | ##흥미로운 질문들에 대한 참고 57 | * http://html5homi.es/ 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #JOB INTERVIEW QUESTIONNAIRE 2 | 3 | @version 1.0 4 | 5 | ##Contributors 6 | 7 | @bentruyman (http://bentruyman.com/), @roger_raymond (http://twitter.com/iansym), @ajpiano (http://ajpiano.com/), @paul_irish (http://paulirish.com/), @SlexAxton (http://alexsexton.com/), @boazsender (http://boazsender.com/), @miketaylr (http://miketaylr.com/), @vladikoff (http://vladfilippov.com/), @gf3 (http://gf3.ca/), @jon_neal (http://twitter.com/jon_neal), @wookiehangover (http://wookiehangover.com/) and @darcy_clarke (http://darcyclarke.me) 8 | 9 | ## General Questions: 10 | 11 | * Are you on Twitter? 12 | * Yes 13 | * If so, who do you follow on Twitter? 14 | * *Mostly web developers and designers.* 15 | 16 | * Are you on GitHub? 17 | * If so, what are some examples of repos you follow 18 | * *[HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/), [Modernizr](https://github.com/Modernizr/Modernizr/), [Video.js](https://github.com/zencoder/video-js) and lots more.* 19 | 20 | * What blogs do you follow? 21 | * *Lots (and also podcasts) including [HTML5Weekly](http://html5weekly.com), [JavaScript Weekly](http://javascriptweekly.com) / [JavaScript Show](http://javascriptshow.com/), [CSS Tricks](http://css-tricks.com/) / [Shoptalk](http://shoptalkshow.com/), [JavaScript Jabber](http://javascriptjabber.com/), [The Web Ahead](http://5by5.tv/webahead/) And I try to devour as much of what is on [Hacker News](http://news.ycombinator.com/) as possible.* 22 | 23 | * What version control systems have you used (Git, SVN etc.)? 24 | * *Git and SVN* 25 | 26 | * What is your preferred development environment? (OS, Editor, Browsers, Tools etc.) 27 | * *Mac, Sublime 2, Chrome Dev Tools, Firebug, Photoshop, lots of online resources* 28 | 29 | * Can you describe your workflow when you create a web page? 30 | * *Usually start with my [HTML5 Boilerplate fork](https://github.com/johnpolacek/html5project), then markup, then styling, then JavaScript. I try to tackle the most challenging stuff first.* 31 | 32 | * Can you describe the difference between progressive enhancement and graceful degradation? 33 | * *Progressive enhancement is starting from a baseline and then building enhancements for new browser tech on top.* 34 | * *Graceful degradation is starting with designing the most optimal browser experience, then designing fallbacks for older browsers.* 35 | * *Some methods for doing this are media queries, javascript polyfills and javascript detection libraries like Modernizr* 36 | 37 | * Explain what "Semantic HTML" means. 38 | * *It means the opposite of using divs for everything. Taking advantage of new HTML5 elements like nav, article, header, footer, etc.* 39 | 40 | * What browser do you primary develop in and what developer tools do you use? 41 | * *Chrome* 42 | 43 | * How would you optimize a websites assets/resources? 44 | * *Use photoshop to compress image files, choosing the best format for the best compression, then use ysmush.it to get even more lossless compression.* 45 | * *Concatenate and minify JavaScript and CSS Files* 46 | * *Use sprite sheets and icon fonts* 47 | * *Use a cdn for jquery and hosting video* 48 | * *Cache static files (in the past this would be typically done with a php header, but now you could use a HTML5 Cache Manifest)* 49 | 50 | * Why is it better to serve site assets from multiple domains? 51 | * *Parallel downloads speed up the page load. Also, serving static files from a CDN ([S3](http://aws.amazon.com/s3/) for example) takes some load off your server.* 52 | 53 | * How many resources will a browser download from a given domain at a time? 54 | * *Depends on the browser. The recommendation is to stick to 2-4 hostnames [(source)](http://www.yuiblog.com/blog/2007/04/11/performance-research-part-4/)* 55 | 56 | * Name 3 ways to decrease page load. (perceived or actual load time) 57 | * *The best way is usually to reduce your image sizes. Minify and concatenate JS/CSS. Have JS at the bottom of the page. Use a CDN.* 58 | 59 | * If you jumped on a project and they used tabs and you used spaces, what would you do? 60 | * *Conform to the conventions (stay consistant)* 61 | 62 | * Write a simple slideshow page 63 | * [Already did](http://johnpolacek.github.com/scrolldeck.js/) 64 | 65 | * What tools do you use to test your code's performance? 66 | * *[Yahoo! YSlow](http://developer.yahoo.com/yslow/)* 67 | * *[Google PageSpeed](https://developers.google.com/speed/pagespeed/)* 68 | * *[Pingdom Tools](http://tools.pingdom.com/fpt/)* 69 | * [JSPerf](http://jsperf.com/) 70 | * [Dromaeo](http://dromaeo.com/) 71 | 72 | * If you could master one technology this year, what would it be? 73 | * *I put more importance on building cool things over any specific type of tech. People seem to be doing [neat stuff](http://www.instructables.com/id/Arduino-LCD-Twitter-display/) with [Node.js](http://nodejs.org/) + [Arduino](http://www.arduino.cc) lately* 74 | 75 | * Explain the importance of standards and standards bodies. 76 | * *Standards are the only thing holding this crazy chaotic thing we call the web together. They make it possible for us to code up web stuff that works cross-browser/platform/device/screen* 77 | 78 | ## HTML-Specific Questions: 79 | 80 | * What's a `doctype` do, and how many can you name? 81 | * *Defines the version of html the document is using. Let's just do html and call it a day. This ain't 2007.* 82 | 83 | * What's the difference between standards mode and quirks mode? 84 | * *Quirks mode is for old (really old!) browsers. It essentially gives them permission to continue to follow their own busted way of rendering a web page as opposed to standards mode where all the browsers have come to an agreement about how to handle styling and markup. This question feels dated.* 85 | 86 | * What are the limitations when serving XHTML pages? 87 | * Are there any problems with serving pages as `application/xhtml+xml`? 88 | * *Yes. [Here's a nice article](http://www.webdevout.net/articles/beware-of-xhtml/) on this stuff. These questions are giving me a headache. Let's just do html5.* 89 | 90 | * How do you serve a page with content in multiple languages? 91 | * *You would generally use a CMS for this, which would be wired up with different content for each language, but still output the same structure and styling.* 92 | 93 | * What kind of things must you be wary of when design or developing for multilingual sites? 94 | * *Spacing is a biggie. You want to make sure you have a fluid design that can accommodate different sized type. This can be particularly noticeable in navigation buttons that might overlap content or break in the middle of a word.* 95 | 96 | * Can you use XHTML syntax in HTML5? 97 | * *[Yes](http://adactio.com/journal/1595/)* 98 | 99 | * How do you use XML in HTML5? 100 | * *I like the idea of HTML as a flavor of XML (XHTML) - i.e. quoted attr's and trailing slashes on br's, img's, etc.* 101 | 102 | * What are `data-` attributes good for? 103 | * *Storing data in the DOM. I love it.* 104 | 105 | * What are the content models in HTML4 and are they different in HTML5? 106 | * *In HTML4, there are 2 types of elements: Block and Inline. HTML5 emphasizes semantics and structure, so it has organized its elements into the categories of metadata, flow, sectioning, heading, phrasing, interactive & embedded* 107 | 108 | * Consider HTML5 as an open web platform. What are the building blocks of HTML5? 109 | * *HTML, CSS and JavaScript* 110 | 111 | * Describe the difference between cookies, sessionStorage and localStorage. 112 | * *Cookies are for storing small amounts of website data, such as a user name. HTML5 Web Storage is a faster, improved means of storing website data. sessionsStorage is for temporary data, and localStorage is for persistant data.* 113 | 114 | ## JS-Specific Questions 115 | 116 | * Which JavaScript libraries have you used? 117 | * *jQuery of course. Other ones I've used are jQuery UI, jQuery Mobile, Modernizr, Greensock and then lots of little utility ones* 118 | 119 | * Have you ever looked at the source code of the libraries/frameworks you use? 120 | * *Yeah. Plenty of good stuff to learn in there. Such as https://vimeo.com/12529436 and https://vimeo.com/18901514* 121 | 122 | * How is JavaScript different from Java? 123 | * *They are very different. From what I've heard, the only reason they share the name is for marketing purposes. Java is a programming language that gets compiled then run as a standalone 'applet' in a VM or browser. Whereas JavaScript is a scripting language designed to be run only through a browser. They are both OOP, but Java is strictly typed while JS is loose.* 124 | 125 | * What's a hashtable? 126 | * *A hashtable is an associative array of key/value pairs. JavaScript Objects are hashtables.* 127 | 128 | * What are `undefined` and `undeclared` variables? 129 | * *undeclared vars have not been declared by a var statement (considered null). undefined vars have been declared but have no value.* 130 | 131 | * What is a closure, and how/why would you use one? 132 | * *Closures provide a means of putting function definitions and expressions inside of other functions. A common use would be binding event handler functions so that 'this' refers to the event object. The Module Pattern is the classic example.* 133 | 134 | * What's a typical use case for anonymous functions? 135 | * *For single use methods, like when you need to pass a one-liner of code to another function. Or when you want to scope vars via a closure.* 136 | 137 | * Explain the "JavaScript module pattern" and when you'd use it. 138 | * *The module pattern is a way of organizing and encapsulating code via a closure. It allows you to create public/private functions and vars inside an object (the module). It lessens the likelihood of naming conflicts and unintended interactions with other functions/vars on the page. Modules should work independently and be easily extensible. Using modules enables to write widgets and plugins that interact with each other.* 139 | 140 | * How do you organize your code? 141 | * *I like using the Module Pattern quite a bit. Whenever possible, I like to widgetize/pluginize my code.* 142 | 143 | * What's the difference between host objects and native objects? 144 | * *Native Objects are objects/methods that exist in the ECMAScript spec (Date, Math, String methods, etc.) Host Objects are created by the environment (window, history, getElementByID, etc.) or ones you create yourself.* 145 | 146 | * Difference between: 147 | ```javascript 148 | function Person(){} var person = Person() var person = new Person() 149 | ``` 150 | * *The first is undefined. The second is an object.* 151 | 152 | * What's the difference between `.call` and `.apply`? 153 | * *`.apply` and `.call` do the same thing, but `.apply` uses an array containing arguments for the target method as the second parameter.* 154 | 155 | * explain `Function.prototype.bind`? 156 | * *Use this to create functions that when called have a particular value for `this` and therefore binding it to the original value of the target object* 157 | 158 | * When do you optimize your code? 159 | * *All the time, from the beginning structure, to refactoring along the way, to re-evaluating at the end.* 160 | 161 | * Can you explain how inheritance works in JavaScript? 162 | * *JavaScript does not have classes - it uses prototypal inheritance. There continues to be [debate](http://stackoverflow.com/questions/6418674/improvement-over-john-resigs-javascript-class-framework) over what specific inheritance pattern works best. I like [John Resig’s approach](http://ejohn.org/blog/simple-javascript-inheritance/) as implemented in [$.Class by JavaScriptMVC](http://javascriptmvc.com/docs.html#!jQuery.Class) simply because it just makes the most sense to me.* 163 | 164 | * When would you use `document.write()`? 165 | * *It is bad practice to use `document.write()`. Instead, use DOM manipulation methods like `innerHTML`. The one case where it is acceptable from what I understand is where you would want to add link to a stylesheet if JavaScript is enabled.* 166 | 167 | * What's the difference between feature detection, feature inference, and using the UA string 168 | * *Using feature detection over user agent detection is favored because devices and device features are constantly changing and therefore it is better to design behavior based on whether particular features are present or not. For example, by using [Modernizr](http://modernizr.com/) or [yepnope](http://yepnopejs.com).* 169 | 170 | * Explain AJAX 171 | * *AJAX is used for asynchonously sending and receiving data without interfering with any processes occuring on the page. It is used for things like form submission, loading dynamic content assets and user interaction like chat rooms and multiplayer games. When data is returned from a server, a callback function is then executed that handles the data. AJAX stands for Asynchronous JavaScript and XML, which has become a bit outdated as most are using JSON these days. But, AJAJ just doesn’t have as nice a ring to it though.* 172 | 173 | * Explain how JSONP works (and how it's not really AJAX) 174 | * *JSONP stands for JSON with padding. The padding is a callback function that is used to wrap the data returned from the server. The reason for its existence is to get around browser's same-origin restriction against cross domain requests.* 175 | 176 | * Have you ever used JavaScript templating? If so, what libraries have you used? (Mustache.js, Handlebars etc.) 177 | * *I've used jQuery Templates and more recently Mustache. Recently though, my favorite has been to use [ICanHaz.js](http://icanhazjs.com) with Mustache. * 178 | 179 | * Explain "hoisting". 180 | * *Hoisting is a feature in JavaScript where var declarations are moved to the top of the function body. However, the initialization/assignment of the var is not. Therefore it is considered best practice to define and assign all var declarations at the top of a function.* 181 | 182 | * What is FOUC? How do you avoid FOUC? 183 | * *FOUC = Flash Of Unstyled Content. The standard way is to do a .no-js hook on the document body that gets changed to .js by some script in the document head.* 184 | 185 | * Describe event bubbling. 186 | * *Events are dispatched first at the event target, then propagate up through the target element's parent and ancestors, 'bubbling' all the way up to the document root.* 187 | 188 | * What's the difference between an "attribute" and a "property"? 189 | * *An attribute carries information about an element in the form of a key value pair. A property is the key portion of that attribute.* 190 | 191 | * Why is extending built in JavaScript objects not a good idea? 192 | * *The main reason not to do it is to avoid conflicts - for example, if two different scripts are extending an object in an incompatible way. If every JS library out there started extending object prototypes, it would create a huge mess. It is best to leave the built-ins alone, as that way everyone knows their expected behavior and there are no surprises down the road.* 193 | 194 | * Why is extending built ins a good idea? 195 | * *The temptation is that by extending a native object, you can quickly bring useful functionality to JS prototypes, like Array or String. But that quick solution can lead to big headaches later on. Are there any good use cases? Some say a worthy use would be making polyfills for older browsers to bring them up to the latest EcmaScript standards, yet even that seems open to causing trouble. Best steer clear. There be dragons.* 196 | 197 | * Difference between document load event and document ready event? 198 | * *Document ready fires when the html load has completed and the DOM is 'ready'. The window load fires when images and other page content have all finished loading.* 199 | 200 | * What is the difference between `==` and `===`? 201 | * *`===` is strictly equal, while `==` allows for truthiness, where the objects being compared are equal after type coercion. For example, `1=="1"` is true, but `1==="1"` is false.* 202 | 203 | * Explain how you would get a query string parameter from the browser window's URL. 204 | * *I would look up how to do it on [stackoverflow](http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript).* 205 | 206 | * Explain the same-origin policy with regards to JavaScript. 207 | * *A script can read only the properties of windows and documents that are loaded from the same host, through the same port, and by the same protocol as the script itself. ([source])(http://docstore.mik.ua/orelly/webprog/jscript/ch21_03.htm)* 208 | 209 | * Explain event delegation. 210 | * *Event delegation is assigning event handlers further up the DOM tree to capture events as they bubble up from children. For example, adding a click event listener to a `