|
1 | | -#QUESTIONARIO COLLOQUIO DI LAVORO |
| 1 | +#Domande per il colloquio di lavoro per front-end |
2 | 2 |
|
3 | | -@version 1.0 |
4 | | - |
5 | | -##Collaboratori |
| 3 | +@version 2.0.0 |
6 | 4 |
|
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) |
| 5 | +Questo repository contiene una serie di domande che possono essere usate nei colloqui di lavoro quando si esaminano i potenziali candidati per il ruolo di front-end. Non è affatto consigliato usare ogni singola domanda con lo stesso candidato (richiederebbe ore). Scegliere alcune di queste domande dalla lista dovrebbe aiutarti ad esaminare le skill che richiedi. |
8 | 6 |
|
9 | | -## Domande Generali: |
| 7 | +L'articolo [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) di [Rebecca Murphey](http://rmurphey.com/) è un'ottima risorsa da leggere prima di affrontare un colloquio. |
10 | 8 |
|
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? |
| 9 | +**Nota:** Tieni presente che molte di queste domande sono a risposta aperta e possono portare a interessanti discussioni che ti possono far capire le capacità di una persona più di quello che farebbe una risposta diretta. |
| 10 | + |
| 11 | +####Collaboratori Originali |
| 12 | + |
| 13 | +La maggior parte delle domande sono state prese da una discussione su [oksoclap](http://oksoclap.com/) originariamente creata da [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) e con il contributo delle seguenti persone: |
| 14 | + |
| 15 | +* [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com |
| 16 | +* [@cowboy](http://twitter.com/cowboy) - http://benalman.com |
| 17 | +* [@ajpiano](http://ajpiano) - http://ajpiano.com |
| 18 | +* [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com |
| 19 | +* [@boazsender](http://twitter.com/boazsender) - http://boazsender.com |
| 20 | +* [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com |
| 21 | +* [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com |
| 22 | +* [@gf3](http://twitter.com/gf3) - http://gf3.ca |
| 23 | +* [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal |
| 24 | +* [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com |
| 25 | +* [@darcy_clarke](http://twitter.com/darcy) - http://darcyclarke.me |
| 26 | +* [@iansym](http://twitter.com) |
| 27 | + |
| 28 | +### Domande Generali: |
| 29 | + |
| 30 | +* Cosa hai imparato ieri/questa settimana? |
| 31 | +* Cosa ti entusiasma o ti interessa della programmazione? |
| 32 | +* Parla del tuo ambiente di sviluppo preferito. (Sistema Operativo, Editor di testo, Browser, Strumenti ecc.) |
| 33 | +* Puoi descrivere il tuo metodo di lavoro quando crei una pagina web? |
19 | 34 | * Puoi descrivere la differenza tra miglioramento progressivo [*progressive enhancement*] e degradazione elegante [*graceful degradation*]? |
20 | 35 | * 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? |
| 36 | +* Spiega cosa significa "HTML Semantico". |
23 | 37 | * Come ottimizzeresti le risorse/asset di un sito? |
24 | 38 | * Mi aspetto svariate soluzioni che possono includere: |
25 | 39 | * Concatenazione dei file |
26 | 40 | * Minimizzazione [*minification*] dei file |
27 | 41 | * Uso di CDN |
28 | 42 | * Caching |
29 | 43 | * 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? |
| 44 | +* Perché è meglio servire file per il sito da più domini? |
| 45 | + * Quante risorse scaricherà per volta un browser da uno specifico dominio? |
| 46 | +* Citami 3 modi per diminuire il caricamento della pagina. (percepito o effettivo tempo di caricamento) |
| 47 | +* Se cominci a lavorare su un progetto già iniziato dove vengono usati tab invece di spazi, cosa fai? |
34 | 48 | * Suggerisci di usare per il progetto qualcosa tipo EditorConfig (http://editorconfig.org) |
35 | 49 | * Ti adatti alle convezioni (rimani coerente) |
36 | 50 | * `issue :retab! command` |
37 | | -* Scrivi una semplice pagina con slideshow |
| 51 | +* Scrivi una semplice pagina con slideshow |
38 | 52 | * Punti bonus se non utilizza JS. |
39 | 53 | * 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. |
| 54 | + * Profiler, JSPerf, Dromaeo |
| 55 | +* Se potessi approfondire una tecnologia quest'anno, quale sarebbe? |
| 56 | +* Spiega l'importanza degli standard e degli enti di normazione. |
| 57 | +* Cosa è il FOUC? Come eviti il FOUC? |
45 | 58 |
|
46 | | -## Domande Specifiche su HTML: |
| 59 | +### Domande Specifiche su HTML: |
47 | 60 |
|
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? |
| 61 | +* Cosa fa il `doctype`? |
| 62 | +* Qual è la differenza tra standard mode e quirks mode? |
| 63 | +* Quali sono le limitazioni quando servi pagine XHTML? |
51 | 64 | * Ci sono dei problemi a servire le pagine come `application/xhtml+xml`? |
52 | | -* Come servi una pagina con il contenuto in più lingue? |
| 65 | +* Come servi una pagina con il contenuto in più lingue? |
53 | 66 | * 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? |
| 67 | +* Per cosa sono utili gli attributi `data-`? |
| 68 | +* Considera HTML5 come una piattaforma web aperta. Quali sono i mattoni di HTML5? |
59 | 69 | * Descrivi le differenze tra cookie, sessionStorage e localStorage. |
60 | 70 |
|
61 | | -## Domande Specifiche su JS |
| 71 | +### Domande Specifiche su JS |
62 | 72 |
|
63 | | -* Quali librerie JavaScript hai usato? |
64 | | -* Come è diverso JavaScript da Java? |
| 73 | +* Spiega l'event delegation. |
| 74 | +* Spiega come funziona `this` in JavaScript. |
| 75 | +* Spiega come funziona l'ereditarietà prototipale [*prototypal inheritance*]. |
| 76 | +* Come fai a testare il tuo codice JavaScript? |
| 77 | +* AMD contro CommonJS? |
65 | 78 | * Cosa è una hashtable? |
66 | | -* Cosa sono le variabili `undefined` e `undeclared`? |
67 | | -* Cosa è una chiusura [*closure*], e come/perché ne useresti una? |
| 79 | +* Cosa sono le variabili `undefined` e `undeclared`? |
| 80 | +* Cosa è una chiusura [*closure*], e come/perché ne useresti una? |
68 | 81 | * 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. |
| 82 | +* Qual è l'uso tipico di una funzione anonima? |
| 83 | +* Spiega il "JavaScript module pattern" e quando lo useresti. |
| 84 | + * Punti bonus se menziona namespacing pulito. |
72 | 85 | * 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: |
| 86 | +* Come organizzi il tuo codice? (module pattern, ereditarietà classica?) |
| 87 | +* Qual è la differenza tra oggetti host e oggetti nativi? |
| 88 | +* Differenza tra: |
76 | 89 | ```javascript |
77 | 90 | function Person(){} var person = Person() var person = new Person() |
78 | 91 | ``` |
79 | | -* Qual è la differenza tra `.call` e `.apply`? |
80 | | -* Spiega `Function.prototype.bind`? |
81 | | -* Quando ottimizzi il tuo codice? |
| 92 | +* Qual è la differenza tra `.call` e `.apply`? |
| 93 | +* Spiega `Function.prototype.bind`? |
| 94 | +* Quando ottimizzi il tuo codice? |
82 | 95 | * Puoi spiegare come funziona l'ereditarietà in JavaScript? |
83 | | -* Quando useresti `document.write()`? |
| 96 | +* Quando useresti `document.write()`? |
84 | 97 | * 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) |
| 98 | +* Qual è la differenza tra il rilevamento di funzionalità [*feature detection*], la deduzione di funzionalità [*feature inference*], e l'uso della stringa UA |
| 99 | +* Spiega AJAX nel modo più dettagliato possibile |
| 100 | +* Spiega come funziona JSONP (e come non è veramente AJAX) |
88 | 101 | * Hai mai usato il templating JavaScript? |
89 | 102 | * Se se sì, quali librerie hai utilizzato? (Mustache.js, Handlebars ecc...) |
90 | 103 | * 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: |
| 104 | +* Descrivi l'event bubbling. |
| 105 | +* Qual è la differenza tra un "attribute" e una "property"? |
| 106 | +* Perché extending built negli oggetti JavaScript non è una buona idea? |
| 107 | +* Perché extending built è una buona idea? |
| 108 | +* Differenza tra l'evento document load e l'evento document ready? |
| 109 | +* Qual è la differenza tra `==` e `===`? |
| 110 | +* Spiega come prenderesti il parametro query string dall'URL della finestra del browser. |
| 111 | +* Spiega la policy "stessa origine" [*same-origin*] per quanto riguarda JavaScript. |
| 112 | +* Descrivi i pattern di ereditarietà in JavaScript. |
| 113 | +* Cosa ottieni da: |
103 | 114 | ```javascript |
104 | | -[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] |
| 115 | +[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] |
105 | 116 | ``` |
106 | | -* Descrivi la tecnica della memoizzazione (evitando la ripetizione del calcolo) in JavaScript. |
107 | | -* Perché è chiamato operatore Ternario, cosa indica la parola "Ternario"? |
| 117 | +* Descrivi la tecnica della memoizzazione (evitando la ripetizione del calcolo) in JavaScript. |
| 118 | +* Perché è chiamata espressione Ternaria, cosa indica la parola "Ternaria"? |
108 | 119 | * Cosa è l'arietà di una funzione? |
| 120 | +* Cosa è `"use strict";`? Quali sono i vantaggi e gli svantaggi nell'usarlo? |
109 | 121 |
|
110 | | -## Esempi di Codice JS: |
| 122 | +### Esempi di Codice JS: |
111 | 123 |
|
112 | 124 | ```javascript |
113 | 125 | ~~3.14 |
114 | 126 | ``` |
115 | | -Domanda: Quale valore viene ritornato dalla dichiarazione qui sopra? |
116 | | -**Risposta: 3** |
| 127 | +Domanda: Quale valore viene ritornato dalla dichiarazione qui sopra? |
| 128 | +**Risposta: 3** |
117 | 129 |
|
118 | 130 | ```javascript |
119 | 131 | "i'm a lasagna hog".split("").reverse().join(""); |
120 | 132 | ``` |
121 | | -Domanda: Quale valore viene ritornato dalla dichiarazione qui sopra? |
122 | | -**Risposta: "goh angasal a m'i"** |
| 133 | +Domanda: Quale valore viene ritornato dalla dichiarazione qui sopra? |
| 134 | +**Risposta: "goh angasal a m'i"** |
123 | 135 |
|
124 | 136 | ```javascript |
125 | 137 | ( window.foo || ( window.foo = "bar" ) ); |
126 | 138 | ``` |
127 | | -Domanda: Qual è il valore di window.foo? |
128 | | -**Risposta: "bar"** |
| 139 | +Domanda: Qual è il valore di window.foo? |
| 140 | +**Risposta: "bar"** |
129 | 141 | solo se window.foo era falso altrimenti manterrà il suo valore. |
130 | 142 |
|
131 | 143 | ```javascript |
132 | 144 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); |
133 | 145 | ``` |
134 | | -Domanda: Qual è il risultato dei due alert qui sopra? |
135 | | -**Risposta: "Hello World" & ReferenceError: bar is not defined** |
| 146 | +Domanda: Qual è il risultato dei due alert qui sopra? |
| 147 | +**Risposta: "Hello World" & ReferenceError: bar is not defined** |
136 | 148 |
|
137 | 149 | ```javascript |
138 | 150 | var foo = []; |
139 | 151 | foo.push(1); |
140 | 152 | foo.push(2); |
141 | 153 | ``` |
142 | | -Domanda: Qual è il valore di foo.length? |
| 154 | +Domanda: Qual è il valore di foo.length? |
143 | 155 | **Risposta: `2` |
144 | 156 |
|
145 | 157 | ```javascript |
146 | 158 | var foo = {}; |
147 | 159 | foo.bar = 'hello'; |
148 | 160 | ``` |
149 | | -Domanda: Qual è il valore di foo.length? |
| 161 | +Domanda: Qual è il valore di foo.length? |
150 | 162 | **Risposta: `undefined` |
151 | 163 |
|
152 | | - |
153 | | -## Domande Specifiche su jQuery: |
| 164 | +### Domande Specifiche su jQuery: |
154 | 165 |
|
155 | 166 | * Spiega la "concatenazione" [*chaining*]. |
156 | 167 | * Spiega "deferreds". |
157 | 168 | * 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? |
| 169 | +* Cosa fa `.end()`? |
| 170 | +* Come, e perché, assegneresti un namespace al gestore di un evento? |
160 | 171 | * Citami 4 differenti valori che puoi passare al metodo jQuery. |
161 | 172 | * 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()`? |
| 173 | +* Cosa è la coda di effetti [*fx queue*]? |
| 174 | +* Qual è la differenza tra `.get()`, `[]`, e `.eq()`? |
| 175 | +* Qual è la differenza tra `.bind()`, `.live()`, e `.delegate()`? |
165 | 176 | * Qual è la differenza tra `$` e `$.fn`? O anche solo cosa è `$.fn`. |
166 | | -* Ottimizza questo selettore: |
| 177 | +* Ottimizza questo selettore: |
167 | 178 | ```javascript |
168 | 179 | $(".foo div#bar:eq(0)") |
169 | 180 | ``` |
| 181 | +* Differenza tra 'delegate()' e 'live()'? |
| 182 | + |
170 | 183 |
|
171 | | -## Domande Specifiche su CSS: |
| 184 | +### Domande Specifiche su CSS: |
172 | 185 |
|
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? |
| 186 | +* Descrivi cosa fa un file CSS "reset" e in cosa è utile. |
| 187 | +* Descrivi i Float e come funzionano. |
| 188 | +* Quali sono le varie tecniche di clearing e quale è appropriata per quale contesto? |
| 189 | +* Spiega gli sprite CSS, e come li implementeresti in una pagina o in un sito. |
| 190 | +* Quali sono le tue tecniche di sostituzione immagini [*image replacement*] preferite e quale usi quando? |
| 191 | +* Hack delle proprietà CSS, file .css inclusi con condizioni, o... altro? |
| 192 | +* Come servi le tue pagine per i browser con funzionalità limitate? |
180 | 193 | * 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. |
| 194 | +* Quali sono i vari modi per nascondere visualmente il contenuto (e renderlo disponibile solo per gli screen reader)? |
| 195 | +* Hai mai usato un sistema di griglie [*grid system*], e se sì, qual è il tuo preferito? |
| 196 | +* Hai mai usato o implementato media queries o CSS/layout specifici per mobile? |
| 197 | +* Familiarità con lo styling SVG? |
| 198 | +* Come ottimizzi le tue pagine web per la stampa? |
| 199 | +* Quali sono alcuni dei "trucchi" per scrivere CSS efficiente? |
| 200 | +* Quali sono i vantaggi/svantaggi nell'usare i preprocessori CSS? (SASS, Compass, Stylus, LESS) |
| 201 | + * Se sì, descrivi cosa ti piace e cosa non ti piace dei preprocessori CSS che hai usato. |
189 | 202 | * Come implementeresti una grafica web che usa font non standard? |
190 | 203 | * Webfonts (servizi di font tipo: Google Webfonts, Typekit, ecc...) |
191 | 204 | * Spiega come un browser determina quali elementi corrispondono a un selettore CSS. |
192 | 205 |
|
193 | | -## Domande Opzionali per divertimento: |
| 206 | +### Domande Opzionali per divertimento: |
194 | 207 |
|
195 | 208 | * 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) |
| 209 | +* Quali sono le tue parti preferite degli strumenti di sviluppo che usi? |
| 210 | +* Hai qualche progetto personale? Di che tipo? |
208 | 211 | * 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. |
|
0 commit comments