HTML e CSS sono difficili da intervistare per alcuni motivi:
Sono troppo semplici, rispetto, ad esempio, a un linguaggio di programmazione,
Dipendono molto dal contesto del lavoro. Esempi:
Se crei siti Web su scala Google, estremamente veloci e ottimizzati, le persone che intervisti per il lavoro non possono ignorare quali sono gli sprite CSS.
Se si creano siti Web validi XHTML W3C, è necessario assicurarsi che i candidati conoscano la differenza tra XHTML 1.0 e XHTML 1.1 o quali siano gli attributi obbligatori <img/>, ecc.
Se crei siti Web terribili pieni di hack, dovresti chiedere alle persone che intervisti su come faranno tali o tali hack, come serviranno CSS diversi per browser diversi, ecc.
eccetera.
Se si tratta di un puro lavoro HTML e CSS, la persona dovrà lavorare con i designer da un lato e gli sviluppatori dall'altro. Devono conoscere HTML e CSS, ma ciò che è molto più prezioso è la loro capacità di interagire con quelle persone e di comprendere sia le esigenze dei progettisti, i requisiti degli sviluppatori, sia i vincoli di HTML e CSS.
Ad esempio, devono sapere come strutturare il proprio HTML in modo tale che uno sviluppatore JavaScript possa aggiungere interattività in un secondo momento.
Potresti voler iniziare con alcune domande di base:
Qual è il tuo browser preferito?
Se la persona risponde a "Internet Explorer", interrompi immediatamente l'intervista: non hai bisogno di qualcuno del genere.
No sto scherzando. La risposta è irrilevante Invece, puoi chiedere quanto segue:
Parlami degli strumenti di debug che usi nel tuo browser preferito.
Usando Chrome principalmente, lavoro quotidianamente con gli strumenti per sviluppatori. Tali strumenti mi consentono di:
Visualizza le richieste fatte da una pagina,
Studia il tempo impiegato per caricare una pagina e le relative risorse, in particolare la ricerca DNS, i tempi di attesa e di ricezione,
Studia le intestazioni degli elementi inviati, nonché l'indicatore della cache,
Visualizza il DOM e studia come vengono applicati i selettori CSS,
Uso anche YSlow che mi serve da lista di controllo per l'ottimizzazione di un sito Web che richiede un'alta scalabilità. YSlow è anche un buon strumento per determinare se il server è configurato correttamente (invio di intestazioni corrette, ecc.).
In Firefox, utilizzo Firebug, lo strumento molto simile agli strumenti per sviluppatori di Chrome. Gli strumenti per sviluppatori sono disponibili anche nelle nuove versioni di Internet Explorer e mi consentono anche di passare da IE7 a viste di compatibilità IE10. Quest'ultima funzionalità è molto utile, poiché senza di essa, sarei costretto a installare diverse macchine virtuali solo per i test legacy o ad utilizzare molto più spesso i servizi a pagamento come Litmus .
Per favore, spiegami di che <dl/>tag si tratta? Qual era l'uso previsto per questo tag? Come viene utilizzato in pratica? Cosa ne pensi di questo uso prolungato?
Qui, si desidera che la persona che deve essere in grado di spiegare che <dl/>è per i dizionari, che associa una chiave, <dt/>con uno o più valori, <dd/>. Mentre l'uso principale di questo tag era puramente correlato alla semantica, in pratica è stato ampiamente utilizzato per sostituire le tabelle, un buon esempio è PHPBB3. Questa è una buona cosa quando le tabelle rallentano il rendering della pagina, ma devono essere usate con cautela: non solo le tabelle sono ancora appropriate in molti casi per descrivere meglio i dati, ma possono esserci anche altri mezzi, come l'ordinario elenchi, per descrivere il contenuto senza usare <dl/>.
Qual è la differenza tra layout fisso e fluido? Quali sono i pro ed i contro di ognuno?
Il layout fisso ha larghezze predefinite degli elementi. Gli elementi di un layout fluido dipendono dalla larghezza della pagina.
Il layout fisso semplifica la progettazione della pagina, soprattutto in presenza di grafica a tutta larghezza. Anche senza grafica, è ancora più facile, perché ti preoccupi solo di un caso preciso. Ad esempio, Programmers.SE è un sito Web a layout fisso, la colonna che visualizza le domande e le risposte ha sempre le stesse dimensioni. Se un layout fluido venisse utilizzato per questa colonna, ciò creerebbe un problema: su schermi di piccole dimensioni, il testo sarebbe illeggibile, poiché le linee sarebbero troppo corte, mentre su schermi di grandi dimensioni le linee sarebbero estremamente grandi, quindi il testo sarebbe anche illeggibile.
Il problema con il layout fisso è che funziona bene per alcune risoluzioni più utilizzate, ma fallisce più o meno per tutto il resto. Diventa particolarmente importante dall'adozione di monitor molto grandi e di grandi dimensioni e dal crescente utilizzo di Internet su piccoli dispositivi mobili.
Il layout fluido aiuta in questo, ma il design è più difficile da realizzare per tale sito Web. In alcuni scenari su progetti mal gestiti, ciò può portare a hacking HTML e CSS, pagine di grandi dimensioni, bassa manutenibilità e, durante lo sviluppo, a costi più elevati e scadenze non rispettate.
In una pagina con un layout fluido, come puoi evitare la situazione in cui una colonna di testo diventa troppo grande per rimanere leggibile?
È possibile limitare la larghezza di una zona di testo utilizzando la max-widthproprietà.
Cosa ne pensi di questo pezzo di codice <p color="Red" align="Center">Text here</p>:?
Il pezzo di codice ha un difetto nel mescolare la logica di presentazione all'interno dell'HTML. La logica di presentazione deve essere inserita nei CSS per diversi motivi:
- Aiuta a separare preoccupazioni e codice pulito, il che significa manutenzione più economica in seguito,
- Rende gli stili riutilizzabili da una pagina all'altra, il che (al di fuori dei problemi di manutenibilità) aiuta a garantire che tu stia utilizzando gli stessi stili su tutto il sito web,
- Aiuta a ridurre la larghezza di banda, poiché i file CSS verranno memorizzati nella cache.
Dopo alcune domande di base come questa, potresti farne alcune più difficili:
Come evitare la duplicazione di colori o caratteri nei CSS, quando quei colori o caratteri vengono applicati a più elementi che non possono essere scelti come target da un singolo selettore? Ci sono degli svantaggi?
Puoi farlo utilizzando i preprocessori CSS, come Sass o LESS. Consentono di definire colori, caratteri e altre parti dello stile all'interno di variabili che è possibile utilizzare in seguito nei propri stili.
Gli svantaggi dei preprocessori CSS sono che:
A volte richiedono di modificare il flusso di lavoro di sviluppo e distribuzione, al fine di avere il codice CSS aggiornato nel browser,
Sono conosciuti solo da alcuni sviluppatori, il che rende più difficile per una nuova persona aderire o mantenere il progetto in seguito,
Non ci sono IDE validi e veloci per Sass o LESS e l'integrazione all'interno degli IDE più popolari è piuttosto deludente.
Fammi un esempio di un hrefvalore di un'immagine che si trova su CDN, dato che questa immagine viene visualizzata su un sito Web a cui è possibile accedere sia tramite HTTP che HTTPS.
Poiché HTTPS richiede che tutte le risorse chiamate siano anch'esse su HTTPS (altrimenti, in molti casi verrà visualizzato un avviso di sicurezza per l'utente), non è possibile specificare il collegamento come http://cdn.example.com/image.png. Per collegarsi correttamente all'immagine, //cdn.example.com/image.pngdeve essere utilizzato; il browser verrà quindi anteposto http:o in https:base al contesto.
Dato che la dimensione delle pagine e il numero di richieste su un sito Web non possono essere ottimizzati e il contenuto non può essere modificato né aggiungere AJAX, come si dà l'impressione all'utente che il sito Web sia più veloce? Cosa comporta dal punto di vista HTML?
Se si utilizza HTTP 1.1, la pagina potrebbe essere bloccata . Ciò significa che le prime parti appariranno più velocemente, dando l'impressione che il sito Web sia più veloce di quanto non sia nella realtà. La codifica di trasferimento Chunked è impossibile in HTTP 1.0, il che significa che in questo caso non c'è nulla da fare.
Essere in grado di servire il contenuto in blocchi richiede dal punto di vista HTML di riordinare gli elementi, mettendo quelli più critici nella parte superiore del file (il che non significa che dovrebbero apparire nella parte superiore della pagina). Ad esempio, su un sito Web di e-commerce, quando l'utente desidera visualizzare i dettagli del prodotto, il primo blocco può contenere i <head/>dettagli del prodotto. Il prossimo pezzo può contenere gli elementi primari come il logo del sito Web, il menu principale, il copyright, ecc. Infine, l'ultimo pezzo può contenere la sezione "Le persone che hanno acquistato anche questo acquistato", i commenti e le valutazioni del prodotto, il "Condividi su Facebook", ecc.
Infine, puoi chiedere al candidato di lavorare su uno scenario del mondo reale. Può essere qualsiasi cosa, come la più semplice di seguito, per gli scenari complessi in cui la persona ha a che fare con sprite CSS o altre tecniche di ottimizzazione avanzate, con incoerenze del browser, ecc.
Per favore, puoi creare una pagina XHTML con due zone: quella sinistra, con un elenco e quella destra, con il testo. Due zone sono separate da una linea verticale, che si estende dalla cima alla fine della pagina. Elenco e testo di dimensioni variabili, non puoi prevedere quale avrà l'altezza maggiore. Non puoi usare <table/>s.
In realtà, è piuttosto semplice ma mostra se la persona ha il riflesso di pensare alle altezze. Un candidato inesperto creerà la float:leftzona e la border-left:solid 1px #ccc;zona, ma dimentica di aggiungere il bordo alla zona sinistra e di estenderlo in modo che due bordi siano nello stesso posto.
