Domande per Colloqui Junior Frontend Developer: React, Strumenti e Argomenti Avanzati

Introduzione

Questa guida completa contiene 21 domande per il colloquio accuratamente selezionate che coprono argomenti avanzati di sviluppo frontend: React e framework, strumenti di build e controllo della versione, ottimizzazione delle prestazioni, debugging, accessibilità, testing e soft skills. Queste sono le domande che gli sviluppatori frontend junior incontrano effettivamente nei colloqui del 2024-2025. Ogni domanda include una risposta approfondita, una valutazione della rarità e una valutazione della difficoltà basata sull'analisi di centinaia di colloqui reali di importanti aziende tecnologiche e startup.

Questa è la Parte 2 della nostra guida completa ai colloqui. Per i fondamenti di HTML, CSS e JavaScript, consulta Parte 1: Fondamenti di HTML, CSS e JavaScript.

React e Framework (8 Domande)

33. Cos'è JSX e perché lo usiamo in React?

Risposta: JSX (JavaScript XML) è un'estensione della sintassi per JavaScript che assomiglia all'HTML e viene utilizzata per descrivere la struttura dell'interfaccia utente in React.

Esempio:

const element = <h1 className="title">Ciao, {name}!</h1>;

// Viene compilato in:
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Ciao, ',
  name,
  '!'
);

Vantaggi:

• Più leggibile e intuitivo di React.createElement()
• Sembra HTML ma con la piena potenza di JavaScript
• Supporta espressioni tra parentesi graffe {}
• Type-safe quando si usa TypeScript
• Sintassi familiare per gli sviluppatori

Differenze chiave dall'HTML:

• Usa className invece di class
• Usa htmlFor invece di for
• Tutti gli attributi sono camelCase (onClick, onChange)
• È necessario chiudere tutti i tag (inclusi <img />, <br />)

Rarità: Comune Difficoltà: Facile

34. Spiega la differenza tra props e state in React

Risposta:

Props (Proprietà):

• Dati passati DAL componente padre AL componente figlio
• Sola lettura (immutabile dal punto di vista del figlio)
• Usato per la configurazione del componente
• Le modifiche provengono dal re-rendering del padre

// Padre
function Parent() {
  return <Child name="Alice" age={25} />;
}

// Figlio
function Child({ name, age }) {
  return <p>{name} ha {age} anni</p>;
  // Non è possibile modificare name o age
}

State (Stato):

• Dati gestiti ALL'INTERNO di un componente
• Mutabile (può essere modificato con la funzione setter)
• Le modifiche attivano i re-render
• Privato al componente

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Conteggio: {count}
    </button>
  );
}

Differenza chiave: Le props fluiscono verso il basso (da padre a figlio), lo state è locale al componente.

Rarità: Comune Difficoltà: Facile

35. Cos'è l'hook useState e come lo usi?

Risposta: useState è un Hook di React che aggiunge la gestione dello stato ai componenti funzionali.

Sintassi:

const [stateVariable, setStateFunction] = useState(initialValue);

Esempi:

// Semplice contatore
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Conteggio: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementa</button>
      <button onClick={() => setCount(0)}>Azzera</button>
    </div>
  );
}

// Stato dell'oggetto
function Form() {
  const [user, setUser] = useState({ name: '', email: '' });
  
  const handleChange = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value
    });
  };
  
  return (
    <input name="name" value={user.name} onChange={handleChange} />
  );
}

// Inizializzazione lazy (calcolo costoso)
const [data, setData] = useState(() => {
  return expensiveComputation();
});

Punti chiave:

• Gli aggiornamenti dello stato attivano i re-render
• Gli aggiornamenti dello stato sono asincroni
• Usa aggiornamenti funzionali per lo stato basato sullo stato precedente: setCount(prev => prev + 1)

Rarità: Comune Difficoltà: Facile-Media

36. Cosa fa l'hook useEffect? Spiega l'array delle dipendenze.

Risposta: useEffect esegue effetti collaterali dopo il rendering (data fetching, sottoscrizioni, manipolazione del DOM).

Sintassi:

useEffect(() => {
  // Codice dell'effetto collaterale qui
  
  return () => {
    // Pulizia (opzionale)
  };
}, [dipendenze]);

Comportamento dell'array delle dipendenze:

// 1. Nessun array di dipendenze - viene eseguito dopo OGNI rendering
useEffect(() => {
  console.log('Viene eseguito a ogni rendering');
});

// 2. Array vuoto [] - viene eseguito UNA SOLA VOLTA al mount
useEffect(() => {
  console.log('Viene eseguito solo al mount');
  fetchData();
}, []);

// 3. Con dipendenze - viene eseguito quando le dipendenze cambiano
useEffect(() => {
  console.log('Viene eseguito quando count cambia');
  document.title = `Conteggio: ${count}`;
}, [count]);

Casi d'uso comuni:

// Recupero dati
useEffect(() => {
  fetch('/api/users')
    .then(res => res.json())
    .then(data => setUsers(data));
}, []);

// Event listeners (con pulizia)
useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);
  
  return () => window.removeEventListener('resize', handleResize);
}, []);

Rarità: Comune Difficoltà: Media

37. Come visualizzi un elenco di elementi in React? Perché abbiamo bisogno delle chiavi?

Risposta:

Visualizzazione elenchi:

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

Perché le chiavi sono importanti: Le chiavi aiutano React a identificare quali elementi sono stati modificati, aggiunti o rimossi. Consentono aggiornamenti efficienti:

• Riducendo al minimo la manipolazione del DOM
• Preservando lo stato del componente
• Mantenendo l'identità corretta dell'elemento
• Ottimizzando l'algoritmo di riconciliazione

Linee guida per le chiavi:

// BENE - ID univoci e stabili
items.map(item => <Item key={item.id} {...item} />)

// MALE - Indice dell'array (instabile quando l'elenco cambia)
items.map((item, index) => <Item key={index} {...item} />)

// MALE - Chiavi non univoche causano bug
items.map(item => <Item key={item.category} {...item} />)

Quando l'indice è accettabile: Elenchi statici che non vengono mai riordinati o modificati.

Rarità: Comune Difficoltà: Facile-Media

38. Cos'è il Virtual DOM e perché React lo usa?

Risposta: Il Virtual DOM è una rappresentazione JavaScript leggera del DOM reale che React mantiene in memoria.

Come funziona:

1. Render: React crea un albero Virtual DOM quando lo stato cambia
2. Diff: React confronta il nuovo Virtual DOM con la versione precedente (riconciliazione)
3. Update: React calcola le modifiche minime necessarie
4. Patch: React aggiorna solo le parti modificate del DOM reale

Perché è vantaggioso:

• Prestazioni: La manipolazione diretta del DOM è lenta; React raggruppa e riduce al minimo gli aggiornamenti
• Efficienza: Aggiorna solo gli elementi modificati, non l'intero albero
• Esperienza dello sviluppatore: Scrivi codice dichiarativo, React gestisce aggiornamenti efficienti
• Astrazione: Lo stesso codice può essere destinato a piattaforme diverse (React Native, VR)

Esempio:

// Tu scrivi:
<div>{count}</div>

// Quando count cambia da 0 a 1:
// React aggiorna solo il nodo di testo, non l'intero div

Nota: React moderno (architettura Fiber) non confronta letteralmente due Virtual DOM, ma utilizza un concetto simile con i nodi Fiber.

Rarità: Comune Difficoltà: Media

39. Come gestisci i form in React?

Risposta:

Componenti controllati (consigliato): I valori degli elementi del form sono controllati dallo stato di React.

function LoginForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();  // Impedisci il ricaricamento della pagina
    console.log('Inviato:', formData);
    // Chiamata API qui
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
        type="email"
      />
      <input
        name="password"
        value={formData.password}
        onChange={handleChange}
        type="password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

Componenti non controllati (meno comuni): Usa i ref per accedere direttamente ai valori del DOM.

function UncontrolledForm() {
  const emailRef = useRef();
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(emailRef.current.value);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input ref={emailRef} type="email" />
    </form>
  );
}

Best practice: Usa componenti controllati nella maggior parte dei casi.

Rarità: Comune Difficoltà: Media

40. Qual è la differenza tra componenti funzionali e di classe?

Risposta:

Componenti Funzionali (Moderni, preferiti):

function Welcome({ name }) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // Effetti collaterali
  }, []);
  
  return <h1>Ciao, {name}!</h1>;
}

Componenti di Classe (Legacy):

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  componentDidMount() {
    // Effetti collaterali
  }
  
  render() {
    return <h1>Ciao, {this.props.name}!</h1>;
  }
}

Differenze chiave:

• Sintassi: Funzioni vs classi
• State: Hooks (useState) vs this.state
• Lifecycle: Hooks (useEffect) vs metodi del ciclo di vita
• Parola chiave this: Non necessaria nei componenti funzionali
• Boilerplate: Meno codice nei componenti funzionali
• Prestazioni: Leggermente migliori con i componenti funzionali

Standard moderno: I componenti funzionali con Hooks sono ora l'approccio raccomandato (da React 16.8). I componenti di classe funzionano ancora, ma sono considerati legacy.

Rarità: Comune Difficoltà: Facile-Media

Strumenti di Build e Controllo della Versione (5 Domande)

41. Cos'è npm e a cosa serve package.json?

Risposta: npm (Node Package Manager) è il gestore di pacchetti predefinito per JavaScript, utilizzato per installare, gestire e condividere pacchetti di codice.

package.json è il file manifest che contiene:

• Metadata: Nome del progetto, versione, descrizione, autore
• Dependencies: Pacchetti necessari per la produzione (dependencies)
• DevDependencies: Pacchetti necessari solo per lo sviluppo (devDependencies)
• Scripts: Comandi per attività comuni (start, build, test)

Esempio di package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "eslint": "^8.0.0"
  }
}

Comandi comuni:

• npm install - Installa tutte le dipendenze
• npm install package-name - Installa un pacchetto specifico
• npm install --save-dev package-name - Installa come dipendenza di sviluppo
• npm run script-name - Esegui uno script npm
• npm update - Aggiorna i pacchetti

Rarità: Comune Difficoltà: Facile

42. Cos'è Git e perché i team lo usano?

Risposta: Git è un sistema di controllo della versione distribuito che tiene traccia delle modifiche nel codice nel tempo.

Perché i team usano Git:

• Collaborazione: Più sviluppatori lavorano sulla stessa codebase senza conflitti
• Cronologia: Record completo di tutte le modifiche (chi, cosa, quando, perché)
• Branching: Lavora su funzionalità indipendentemente senza influire sul codice principale
• Backup: Codice archiviato in più posizioni (locale + remoto)
• Rollback: Ripristina facilmente le versioni di lavoro precedenti
• Code review: Rivedi le modifiche prima di unirle (pull request)
• Sperimentazione: Prova nuove idee nei branch senza rischi

Concetti di base:

• Repository (repo): Cartella del progetto tracciata da Git
• Commit: Snapshot delle modifiche con messaggio
• Branch: Linea di sviluppo indipendente
• Merge: Combina le modifiche da diversi branch
• Remote: Repository ospitato online (GitHub, GitLab)

Standard del settore: Oltre il 93% degli sviluppatori utilizza Git in tutto il mondo.

Rarità: Comune Difficoltà: Facile

43. Spiega i comandi Git comuni e il flusso di lavoro

Risposta:

Flusso di lavoro di base:

# Clona la repository
git clone https://github.com/user/repo.git

# Controlla lo stato
git status

# Crea un nuovo branch
git checkout -b feature-name
# o sintassi moderna:
git switch -c feature-name

# Apporta modifiche, quindi esegui lo stage
git add file.js
git add .  # Esegui lo stage di tutte le modifiche

# Esegui il commit con un messaggio
git commit -m "Aggiungi la funzionalità di login"

# Invia al remote
git push origin feature-name

# Recupera le ultime modifiche
git pull origin main

# Unisci il branch
git checkout main
git merge feature-name

# Visualizza la cronologia
git log

Comandi essenziali che i junior devono conoscere:

• clone - Copia la repository remota
• add - Esegui lo stage delle modifiche
• commit - Salva lo snapshot con un messaggio
• push - Carica sul remote
• pull - Scarica + unisci le modifiche remote
• branch - Elenca/crea branch
• checkout/switch - Cambia branch
• status - Visualizza lo stato corrente
• log - Visualizza la cronologia dei commit

Rarità: Comune Difficoltà: Facile-Media

44. Cos'è un conflitto di merge e come lo risolveresti?

Risposta: Un conflitto di merge si verifica quando Git non può unire automaticamente le modifiche perché esistono modifiche concorrenti sulle stesse righe di codice.

Scenario comune:

# Lo sviluppatore A modifica la riga 5
# Anche lo sviluppatore B modifica la riga 5
# Durante il merge, Git non sa quale mantenere

Marcatori di conflitto:

<<<<<<< HEAD
const greeting = "Ciao";
=======
const greeting = "Ciao";
>>>>>>> feature-branch

Passaggi per la risoluzione:

1. Identifica i conflitti: Git contrassegna i file con conflitti
2. Apri i file in conflitto: Cerca i marcatori di conflitto
3. Decidi cosa mantenere: Rivedi entrambe le modifiche
4. Modifica il codice: Rimuovi i marcatori, mantieni il codice desiderato
5. Test: Assicurati che il codice funzioni correttamente
6. Esegui lo stage dei file risolti: git add file.js
7. Completa il merge: git commit

Best practice:

• Comunica con il team
• Esegui il pull frequentemente per ridurre al minimo i conflitti
• Mantieni i commit piccoli e mirati
• Esegui test approfonditi dopo la risoluzione

Rarità: Comune Difficoltà: Media

45. Cosa fa Webpack? Cos'è Vite?

Risposta:

Webpack: Un bundler di moduli che prende JavaScript, CSS, immagini e altre risorse, li elabora e li raggruppa in file ottimizzati per il browser.

Cosa fa:

• Raggruppa più file in meno file
• Trasforma il codice (Babel per JSX/ES6, Sass in CSS)
• Ottimizza per la produzione (minificazione, tree shaking)
• Gestisce le dipendenze
• Code splitting per le prestazioni

Concetto di base:

src/
  index.js
  component.js
  styles.css
          ↓ Webpack
dist/
  bundle.js (tutto combinato e ottimizzato)

Vite: Strumento di build moderno che è significativamente più veloce dei bundler tradizionali come Webpack.

Perché Vite è più veloce:

• Utilizza i moduli ES nativi durante lo sviluppo (nessun bundling necessario)
• Hot Module Replacement (HMR) è istantaneo
• Esegue il bundling solo per la produzione
• Migliore esperienza per gli sviluppatori

Quando usare:

• Vite: Nuovi progetti, framework moderni (React, Vue)
• Webpack: Progetti esistenti, necessità di configurazione complessa

Rarità: Comune Difficoltà: Facile-Media

Prestazioni Web e Ottimizzazione (3 Domande)

46. Come ottimizzeresti le prestazioni di caricamento di un sito web?

Risposta:

Ottimizzazione delle immagini:

• Comprimi le immagini (JPG per le foto, PNG per la grafica, WebP per entrambi)
• Usa dimensioni appropriate (non caricare un'immagine di 4000px per una visualizzazione di 300px)
• Carica le immagini sotto la piega in modo lazy
• Usa srcset per immagini responsive

Ottimizzazione del codice:

• Minifica JavaScript, CSS, HTML (rimuovi spazi bianchi, commenti)
• Raggruppa e comprimi i file (gzip o Brotli)
• Rimuovi CSS/JS inutilizzati (tree shaking)
• Code splitting (carica solo il codice necessario per pagina)

Caching:

• Caching del browser con intestazioni di cache appropriate
• Usa CDN per risorse statiche
• Service worker per funzionalità offline

Strategie di caricamento:

• CSS critico inline in <head>
• Differisci JavaScript non critico
• Precarica risorse importanti
• Riduci le richieste HTTP

Metriche delle prestazioni:

• Misura con Lighthouse, PageSpeed Insights
• Obiettivo: FCP < 1.8s, LCP < 2.5s, CLS < 0.1

Rarità: Comune Difficoltà: Media

47. Quali strumenti useresti per misurare le prestazioni di un sito web?

Risposta:

Browser DevTools:

• Scheda Network di Chrome DevTools: Analizza i tempi delle richieste, le dimensioni dei file, l'ordine di caricamento
• Scheda Performance/Lighthouse: Genera report sulle prestazioni con punteggi
• Scheda Coverage: Trova JavaScript/CSS inutilizzati
• Console: Misura con console.time() e Performance API

Strumenti online:

• Google PageSpeed Insights: Ottieni punteggi sulle prestazioni e raccomandazioni
• WebPageTest: Grafici a cascata dettagliati, posizioni multiple
• GTmetrix: Analisi delle prestazioni con voti

Metriche da monitorare:

• First Contentful Paint (FCP): Quando appare il primo contenuto
• Largest Contentful Paint (LCP): Quando il contenuto principale viene caricato
• Time to Interactive (TTI): Quando la pagina diventa interattiva
• Cumulative Layout Shift (CLS): Stabilità visiva
• Total Blocking Time (TBT): Tempo di blocco del thread principale

Per i junior: È sufficiente una familiarità di base con Chrome DevTools e Lighthouse. Non sono previste competenze approfondite di profilazione.

Rarità: Comune Difficoltà: Facile-Media

48. Cos'è il lazy loading e quando lo useresti?

Risposta: Il lazy loading rimanda il caricamento di risorse non critiche fino a quando non sono necessarie, in genere quando stanno per entrare nel viewport.

Casi d'uso comuni:

Immagini:

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Descrizione">

Lazy loading nativo (browser moderni):

<img src="image.jpg" loading="lazy" alt="Descrizione">

JavaScript/React:

// Lazy loading del componente
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Caricamento...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

Vantaggi:

• Caricamento della pagina iniziale più veloce
• Utilizzo della larghezza di banda ridotto
• Prestazioni migliori su connessioni lente
• Migliore esperienza utente (il contenuto appare più velocemente)

Quando usare:

• Immagini sotto la piega
• Componenti pesanti non immediatamente visibili
• Contenuto in schede/accordion
• Implementazioni di scorrimento infinito

Rarità: Non comune Difficoltà: Media

Debugging e Strumenti per Sviluppatori (2 Domande)

49. Come esegui il debug di un errore JavaScript nel browser?

Risposta:

Processo di debug passo dopo passo:

1. Controlla la Console:

console.log(variable);      // Ispeziona i valori
console.error('Errore:', error);  // Registra gli errori
console.table(arrayOfObjects);   // Visualizza i dati in una tabella
console.warn('Avviso');    // Evidenzia gli avvisi

2. Usa i Breakpoint:

• Apri il pannello Sources/Debugger di DevTools
• Fai clic sul numero di riga per impostare un breakpoint
• L'esecuzione del codice si interrompe al breakpoint
• Ispeziona le variabili nel pannello Scope
• Esegui il codice passo dopo passo (Step Over, Step Into, Step Out)

3. Esamina lo Stack Trace:

• I messaggi di errore mostrano i nomi dei file e i numeri di riga
• Segui lo stack di chiamate per trovare l'origine dell'errore
• Controlla gli errori di rete nella scheda Network

4. Esegui il debug dei problemi del DOM:

• Ispeziona gli elementi nel pannello Elements
• Controlla gli stili calcolati
• Usa l'imposizione dello stato :hover
• Verifica che i listener di eventi siano collegati

5. Controlla le Richieste di Rete:

• La scheda Network mostra le chiamate API non riuscite
• Esamina le intestazioni di richiesta/risposta
• Controlla i codici di stato (404, 500, ecc.)

Tecniche di debugging comuni:

• Aggiungi l'istruzione debugger; per mettere in pausa l'esecuzione
• Usa breakpoint condizionali
• Osserva le espressioni
• Metti in black box il codice di terze parti

Rarità: Comune Difficoltà: Facile-Media

50. Quali sono i pannelli principali in Chrome DevTools e a cosa servono?

Risposta:

Pannelli essenziali:

1. Console:

• Visualizza errori e log JavaScript
• Esegui comandi JavaScript
• Prova le espressioni in modo interattivo
• Testing API

2. Elements (Inspector):

• Ispeziona e modifica la struttura HTML
• Modifica il CSS in tempo reale
• Esegui il debug dei problemi di layout
• Visualizza stili calcolati, box model
• Prova design responsive

3. Sources (Debugger):

• Visualizza i file sorgente
• Imposta i breakpoint
• Esegui il codice passo dopo passo
• Modifica e salva le modifiche (workspaces)
• Visualizza lo stack di chiamate

4. Network:

• Monitora le richieste/risposte HTTP
• Controlla i tempi di caricamento e le dimensioni dei file
• Esegui il debug delle chiamate API
• Filtra per tipo (JS, CSS, XHR, immagini)
• Limita la velocità di rete

5. Performance/Lighthouse:

• Analizza le prestazioni di runtime
• Genera audit delle prestazioni
• Identifica i colli di bottiglia
• Controlla Core Web Vitals

6. Application:

• Ispeziona local storage, session storage
• Visualizza e cancella i cookie
• Controlla i service worker
• Gestisci la cache

Per i junior: È prevista una forte familiarità con Console, Elements, Sources e Network. La profilazione delle prestazioni è un vantaggio.

Rarità: Comune Difficoltà: Facile

Accessibilità e Best Practice (2 Domande)

51. Cos'è l'accessibilità web e perché è importante?

Risposta: L'accessibilità web significa progettare e sviluppare siti web che possono essere utilizzati da tutti, comprese le persone con disabilità (visive, uditive, motorie, cognitive).

Perché è importante:

1. Design inclusivo: il 15% della popolazione mondiale ha qualche forma di disabilità 2. Requisiti legali: ADA (Americans with Disabilities Act), Section 508, conformità WCAG 3. Migliore UX per tutti: I sottotitoli aiutano in ambienti rumorosi, la navigazione da tastiera aiuta gli utenti esperti 4. Vantaggi SEO: HTML semantico e struttura corretta migliorano il posizionamento nella ricerca 5. Pubblico più ampio: Non escludere potenziali utenti/clienti 6. Responsabilità etica: L'uguaglianza di accesso è un diritto umano

Disabilità comuni da considerare:

• Visiva: Cecità, ipovisione, daltonismo
• Uditiva: Sordità, perdita dell'udito
• Motoria: Mobilità limitata, tremori, paralisi
• Cognitiva: Difficoltà di apprendimento, problemi di memoria

Business case: I siti web accessibili raggiungono più utenti, si posizionano meglio nella ricerca, evitano cause legali, dimostrano responsabilità aziendale.

Rarità: Comune Difficoltà: Facile-Media

52. Quali sono alcuni modi di base per rendere un sito web più accessibile?

Risposta:

Struttura HTML:

• Usa elementi semantici (<header>, <nav>, <main>, <article>, <footer>)
• Gerarchia di intestazioni appropriata (H1 → H2 → H3, senza salti)
• Etichetta correttamente gli input del form

<label for="email">Email:</label>
<input id="email" type="email" name="email" />

Immagini:

• Includi sempre un testo alt descrittivo
• Usa alt vuoto per le immagini decorative: alt=""

Navigazione da tastiera:

• Tutti gli elementi interattivi devono essere accessibili da tastiera
• Ordine di tabulazione logico
• Indicatori di focus visibili
• Non rimuovere il contorno di :focus

Colore e contrasto:

• Contrasto di colore sufficiente (4.5:1 per il testo normale, 3:1 per il testo grande)
• Non fare affidamento esclusivamente sul colore per trasmettere informazioni
• Prova con simulatori di daltonismo

Attributi ARIA (quando necessario):

<button aria-label="Chiudi finestra di dialogo">×</button>
<div role="alert" aria-live="polite">Modifiche salvate</div>
<nav aria-label="Navigazione principale">...</nav>

Testing:

• Usa screen reader (VoiceOver, NVDA, JAWS)
• Navigazione solo da tastiera
• Strumenti di accessibilità del browser (Lighthouse, axe)

Rarità: Comune Difficoltà: Media

Consapevolezza del Testing (1 Domanda)

53. Cos'è l'unit testing e perché è importante?

Risposta: L'unit testing prevede il test di singole funzioni o componenti in isolamento per verificare che funzionino correttamente.

Cosa testa:

• La funzione restituisce l'output previsto per l'input fornito?
• Il componente esegue il rendering corretto con le props fornite?
• I casi limite funzionano correttamente?

Esempio (Jest):

// Funzione da testare
function add(a, b) {
  return a + b;
}

// Unit test
test('aggiunge 1 + 2 per ottenere 3', () => {
  expect(add(1, 2)).toBe(3);
});

test('gestisce i numeri negativi', () => {
  expect(add(-1, -2)).toBe(-3);
});

Perché è importante:

• Individua i bug in anticipo: Trova i problemi prima della produzione
• Fiducia nelle modifiche: Refactor senza paura
• Documentazione: I test mostrano come dovrebbe essere utilizzato il codice
• Debugging più veloce: Individua la posizione esatta del fallimento
• Design migliore: Il codice testabile è solitamente codice più pulito

Piramide del testing:

• Molti unit test (veloci, economici)
• Meno integration test (testa i componenti insieme)
• Pochi end-to-end test (flussi utente completi, lenti)

Per i junior: È sufficiente capire perché il testing è importante e i concetti di base. La scrittura di suite di test complete non è in genere prevista per le posizioni entry-level, ma la volontà di imparare il testing è importante.

Framework comuni: Jest, React Testing Library, Mocha, Jasmine

Rarità: Comune Difficoltà: Facile-Media

Totale: 21 domande

Questa raccolta rappresenta gli argomenti e gli strumenti avanzati che gli sviluppatori frontend junior incontrano nei colloqui. In combinazione con Parte 1: Fondamenti di HTML, CSS e JavaScript, avrai una copertura completa di 55 domande essenziali per il colloquio per il 2024-2025.