Accessibilità (a11y)
L'accessibilità è la pratica di costruire interfacce web utilizzabili da persone con disabilità, comprese quelle che usano screen reader, tastiera, switch o ingrandimento. È regolata dalle Web Content Accessibility Guidelines (WCAG) e si manifesta nel browser attraverso l'albero di accessibilità derivato da HTML semantico e ARIA. Un markup accessibile migliora anche la SEO e l'usabilità per tutti.
ARIA
ARIA (Accessible Rich Internet Applications) è un insieme di attributi HTML - ruoli, stati e proprietà - che comunicano la semantica di widget personalizzati o dinamici alle tecnologie assistive quando gli elementi nativi non bastano. La prima regola di ARIA è preferire un elemento HTML nativo a un ruolo ARIA ogni volta che ne esiste uno. Un ARIA usato male rende l'interfaccia meno accessibile, non più.
Bundle
Un bundle è il file (o i file) di output che uno strumento di build produce combinando e trasformando i moduli sorgente in qualcosa che il browser può caricare. I bundler moderni come Vite, esbuild e webpack eliminano il codice inutilizzato (tree shaking), suddividono i bundle in chunk ed emettono nomi con hash per il cache busting. La dimensione del bundle incide direttamente sulle performance di caricamento, perciò i team la pianificano e la monitorano.
Cascade
La cascade è l'algoritmo CSS che decide quale dichiarazione vince quando più regole colpiscono lo stesso elemento, pesando origine, layer, specificità e ordine di sorgente. Comprendere la cascade - e i controlli più recenti come i cascade layer (@layer) - è essenziale per scrivere stili prevedibili. La "C" di CSS si riferisce proprio a questo comportamento a cascata.
Client-Side Rendering (CSR)
Il client-side rendering invia un guscio HTML quasi vuoto più del JavaScript che costruisce il DOM nel browser dopo il download e l'esecuzione. Abilita interattività ricca e hosting statico economico, ma penalizza il primo paint e la SEO per i contenuti che arrivano solo dopo l'esecuzione del JS. Il CSR è il comportamento predefinito delle single-page application semplici senza un livello di rendering lato server.
Componente
Un componente è un'unità di interfaccia riutilizzabile e autocontenuta che incapsula markup, stile e comportamento ed espone un'interfaccia tipizzata di input e output. Framework come React, Angular, Vue e Svelte rendono i componenti il blocco costruttivo principale, componendoli in alberi. I Web Component sono lo standard nativo del browser per la stessa idea.
Core Web Vitals
I Core Web Vitals sono un insieme di metriche di performance centrate sull'utente definite da Google - Largest Contentful Paint (LCP), Interaction to Next Paint (INP) e Cumulative Layout Shift (CLS) - usate per misurare caricamento, reattività e stabilità visiva. Sono misurabili sul campo, influenzano il ranking di ricerca e hanno soglie "good" pubblicate. INP ha sostituito First Input Delay (FID) tra i Core Web Vitals nel marzo 2024.
Proprietà personalizzate CSS
Le proprietà personalizzate CSS (variabili CSS) sono valori definiti dall'autore dichiarati con la sintassi --nome e letti con var(--nome), che vanno in cascade ed ereditano come le proprietà normali. A differenza delle variabili dei preprocessori sono vive a runtime, quindi possono essere aggiornate con JavaScript o media query e alimentano theming e design token. Sono limitate all'elemento in cui vengono dichiarate.
CSS Grid
CSS Grid è un sistema di layout bidimensionale che dispone gli elementi in righe e colonne simultaneamente, definito su un contenitore con display: grid. Eccelle nei layout di pagina e di componente in cui conta l'allineamento su entrambi gli assi, complementando il Flexbox monodimensionale. Funzionalità come grid-template-areas e minmax() rendono dichiarativi i layout responsive complessi.
Cumulative Layout Shift (CLS)
Il Cumulative Layout Shift è un Core Web Vital che misura la somma degli spostamenti di layout inattesi durante il ciclo di vita di una pagina, valutando la stabilità visiva. Gli spostamenti sono causati da immagini senza dimensioni, contenuti iniettati dinamicamente e web font che provocano un reflow del testo. Un CLS buono è 0,1 o meno; si riduce riservando lo spazio con width/height espliciti o aspect-ratio.
Critical Rendering Path
Il critical rendering path è la sequenza di passi che il browser compie per trasformare HTML, CSS e JavaScript in pixel renderizzati: il parsing dell'HTML nel DOM, del CSS nel CSSOM, la loro combinazione nel render tree, poi layout e paint. CSS render-blocking e script sincroni bloccano questo percorso. Ottimizzarlo - inline del CSS critico, defer degli script - migliora il primo paint.
DOM
Il Document Object Model è la rappresentazione ad albero in memoria di un documento HTML costruita dal browser, che espone nodi leggibili e modificabili dagli script per cambiare la pagina. La manipolazione diretta del DOM è costosa, motivo per cui i framework introducono astrazioni come il Virtual DOM o la reattività a grana fine. Nel DOM risiede anche la semantica di accessibilità.
Design Token
I design token sono valori denominati e indipendenti dalla piattaforma - colori, spaziature, tipografia, raggi - che codificano le decisioni di design come dati e alimentano più target (CSS, nativo, documentazione). Disaccoppiano l'intento di design dall'implementazione, abilitando theming coerente e modalità chiara/scura. Sul web sono comunemente esposti come proprietà personalizzate CSS.
Event Loop
L'event loop è il modello di concorrenza che permette al JavaScript a thread singolo di gestire il lavoro asincrono processando una coda di callback dopo che lo stack di chiamate è vuoto. Distingue i macrotask (timer, I/O) dai microtask (callback delle Promise), svuotando tutti i microtask tra un macrotask e l'altro. Bloccare il loop con lungo lavoro sincrono congela l'interfaccia e danneggia la reattività.
Flexbox
Flexbox (il CSS Flexible Box Layout) è un modello di layout monodimensionale che distribuisce lo spazio lungo un singolo asse - riga o colonna - e allinea gli elementi sull'asse trasversale. È ideale per componenti come toolbar, barre di navigazione e centratura del contenuto, dove domina l'allineamento in una direzione. Per i layout bidimensionali lo strumento migliore è CSS Grid.
Hydration
L'hydration è il processo con cui il JavaScript lato client collega gli event listener e lo stato reattivo all'HTML renderizzato dal server, rendendo interattiva una pagina statica senza ri-renderizzarla da zero. È il ponte tra SSR/SSG e una SPA funzionante. L'hydration costosa di alberi grandi ha spinto tecniche come hydration parziale, islands e resumability.
Hoisting
L'hoisting è il comportamento di JavaScript di spostare le dichiarazioni in cima al loro scope durante la compilazione, così che var e le dichiarazioni di funzione siano utilizzabili prima della loro posizione testuale. let e const sono soggetti a hoisting ma rimangono nella temporal dead zone finché non vengono inizializzati, lanciando un errore se acceduti prima. Comprendere l'hoisting previene bug sottili di riferimento e di timing.
Interaction to Next Paint (INP)
Interaction to Next Paint è un Core Web Vital che misura la reattività riportando la latenza di interazione più lunga (dall'input al successivo aggiornamento visivo) che un utente sperimenta durante una visita. Ha sostituito First Input Delay tra i Core Web Vitals nel marzo 2024 perché cattura l'intera interazione, non solo il ritardo del primo input. Un INP buono è 200 millisecondi o meno.
Islands Architecture
L'islands architecture renderizza una pagina come HTML perlopiù statico con "isole" interattive isolate che fanno hydration in modo indipendente, invece di idratare l'intera pagina. Ogni isola spedisce solo il JavaScript che le serve, riducendo drasticamente la dimensione del bundle client per i siti ricchi di contenuti. Astro ha reso popolare il pattern, che si sposa bene con il rendering server-first.
JSX
JSX è un'estensione di sintassi di JavaScript, resa popolare da React, che permette di scrivere markup simile all'HTML direttamente nel codice, trasformato da un compilatore in chiamate di funzione che creano elementi. Non è HTML né un template a stringa: sono espressioni che producono una descrizione dell'interfaccia. I nomi degli attributi differiscono dall'HTML (per esempio className invece di class).
Largest Contentful Paint (LCP)
Largest Contentful Paint è un Core Web Vital che misura le performance di caricamento: il tempo di rendering dell'immagine o del blocco di testo più grande visibile nella viewport. Un LCP buono è 2,5 secondi o meno. Si migliora ottimizzando la consegna dell'elemento LCP - preload delle hero image, eliminazione delle risorse render-blocking e uso di un server o di una CDN veloce.
Lazy Loading
Il lazy loading rinvia il fetch di una risorsa finché non serve davvero - tipicamente quando si avvicina alla viewport o si visita una route - per accelerare il caricamento iniziale. L'attributo nativo loading="lazy" gestisce immagini e iframe, mentre il code splitting per route carica il JavaScript pigramente. Bisogna evitare di applicarlo agli elementi above-the-fold o all'elemento LCP.
Media Query
Una media query è una funzionalità CSS che applica stili in modo condizionale in base a caratteristiche del dispositivo o dell'ambiente, come la larghezza della viewport, l'orientamento, prefers-color-scheme o prefers-reduced-motion. Sono il fondamento del responsive design. Le container query le completano rispondendo alla dimensione di un genitore anziché della viewport.
Memoization
La memoization mette in cache il risultato di un calcolo costoso indicizzato per i suoi input, così che chiamate ripetute restituiscano il valore in cache invece di ricalcolare. Nei framework di interfaccia previene re-render e ricalcoli inutili - useMemo/memo di React, computed di Vue, i signal memoizzati di Angular. Memoizzare troppo aggiunge overhead e bug, perciò va mirata ai percorsi caldi misurati.
Progressive Enhancement
Il progressive enhancement è una strategia che costruisce un'esperienza di base con HTML semantico funzionante ovunque, poi stratifica CSS e JavaScript per migliorarla sui browser capaci. Rende il contenuto resiliente a errori di script, reti lente e client più vecchi. Si contrappone alla graceful degradation, che parte dall'esperienza completa e rimuove funzionalità.
Reattività
La reattività è un modello di programmazione in cui l'interfaccia si aggiorna automaticamente quando cambia lo stato sottostante, senza manipolazione manuale del DOM. I framework la implementano tramite diffing del Virtual DOM (React), signal con tracciamento delle dipendenze (Solid, Angular, Vue) o reattività in compilazione (Svelte). I sistemi reattivi a grana fine aggiornano solo i nodi DOM che dipendono dallo stato cambiato.
Risorsa Render-Blocking
Una risorsa render-blocking è un file - tipicamente CSS sincrono o JavaScript non differito nell'head del documento - che il browser deve scaricare ed elaborare prima di poter dipingere il contenuto. Ritardano il primo paint e danneggiano i Core Web Vitals. Le mitigazioni includono l'inline del CSS critico, il caricamento asincrono del CSS non critico e l'aggiunta di defer/async agli script.
Responsive Web Design
Il responsive web design è un approccio che fa adattare a una sola codebase il proprio layout a qualsiasi dimensione di schermo usando griglie fluide, immagini flessibili e media o container query. Ha sostituito i "siti mobile" separati ed è ormai l'aspettativa predefinita. La metodologia mobile-first - progettare prima il layout più piccolo e arricchirlo verso l'alto - è l'implementazione comune.
Server-Side Rendering (SSR)
Il server-side rendering genera l'HTML completo di una pagina sul server per ogni richiesta e lo invia al browser, che mostra subito il contenuto e poi lo idrata per l'interattività. L'SSR migliora primo paint, SEO e anteprime social rispetto al rendering puramente client, al costo di calcolo sul server e di hydration. Framework come Next.js, Nuxt e Angular SSR lo forniscono.
Shadow DOM
Lo Shadow DOM è uno standard del browser che collega a un elemento un sottoalbero incapsulato e isolato, limitandone markup e stili affinché non fuoriescano né entrino. È un blocco fondamentale dei Web Component, abilitando un'incapsulazione reale di stile e DOM senza convenzioni di naming. Gli slot permettono al contenuto esterno di proiettarsi nello shadow tree.
Single-Page Application (SPA)
Una single-page application carica un solo documento HTML e poi aggiorna la vista tramite JavaScript e routing lato client, evitando ricaricamenti completi di pagina durante la navigazione. Le SPA sembrano app e riducono i round trip al server, ma devono gestire da sole routing, code splitting, SEO e accessibilità degli aggiornamenti dinamici. Abbinarle a SSR/SSG ne mitiga le debolezze al primo caricamento.
Specificità
La specificità è il peso che il CSS assegna a un selettore per risolvere i conflitti nella cascade, calcolato dal numero di selettori ID, classe/attributo/pseudo-classe e tipo. Un selettore più specifico vince su uno meno specifico indipendentemente dall'ordine di sorgente. Abusare di selettori ad alta specificità e di !important rende i fogli di stile difficili da mantenere; metodologie e cascade layer lo domano.
Static Site Generation (SSG)
La static site generation renderizza le pagine in HTML al momento della build anziché per richiesta, producendo file che una CDN può servire istantaneamente senza calcolo sul server. Offre le migliori performance e sicurezza per contenuti che cambiano di rado, con rebuild o rigenerazione incrementale che gestiscono gli aggiornamenti. Framework come Next.js, Astro e Hugo supportano la SSG.
Tree Shaking
Il tree shaking è un'ottimizzazione in fase di build che rimuove dal bundle finale il codice mai importato o usato (codice morto), basandosi sulla struttura statica dei moduli ES. Riduce la dimensione del bundle e il tempo di caricamento. Funziona al meglio quando le librerie sono scritte come moduli ES privi di side effect e il bundler sa quali file ne hanno.
Transpilazione
La transpilazione è una compilazione da sorgente a sorgente che converte il codice da un linguaggio o livello di sintassi a un altro comprensibile dall'ambiente target - per esempio da TypeScript a JavaScript, o da ECMAScript moderno a una baseline più vecchia. Strumenti come Babel, esbuild, swc e il compilatore TypeScript la eseguono. Permette ai team di usare nuove funzionalità del linguaggio supportando browser più vecchi.
TypeScript
TypeScript è un superset di JavaScript a tipizzazione statica sviluppato da Microsoft che aggiunge annotazioni di tipo opzionali, interfacce, generici e controllo a tempo di compilazione, transpilando in JavaScript puro. Intercetta un'ampia classe di errori prima del runtime e alimenta il tooling dell'editor come autocompletamento e refactoring. È diventato il linguaggio predefinito per i progetti front-end seri.
Viewport
La viewport è l'area visibile di una pagina web all'interno della finestra del browser, la cui dimensione guida il layout responsive. Il tag controlla come i browser mobile scalano e dimensionano la layout viewport, e width=device-width, initial-scale=1 è l'impostazione responsive standard. Le unità viewport CSS (vw, vh, dvh) dimensionano gli elementi in relazione a essa.
Virtual DOM
Il Virtual DOM è una rappresentazione in memoria dell'interfaccia che un framework confronta (diff) con la versione precedente per calcolare l'insieme minimo di mutazioni reali del DOM necessarie dopo un cambio di stato. Reso popolare da React, baratta un po' di overhead per un modello di programmazione dichiarativo più semplice. I framework basati su signal ottengono ergonomie simili senza un passaggio di diffing.
Web Component
Un Web Component è un elemento personalizzato e riutilizzabile costruito da tre standard del browser - Custom Elements, Shadow DOM e template HTML - che funziona tra framework diversi e in HTML puro. Incapsula markup, stile e comportamento dietro un tag come
Web Worker
Un Web Worker esegue JavaScript su un thread in background separato dal thread principale dell'interfaccia, comunicando tramite scambio di messaggi, così che il calcolo pesante non blocchi rendering o interazione. Per progettazione non ha accesso al DOM. I worker migliorano la reattività per attività come parsing, cifratura ed elaborazione dati e stanno alla base dei service worker offline.
Service Worker
Un service worker è uno script che il browser esegue in background, separato dalla pagina, agendo come proxy di rete programmabile che può intercettare le richieste, mettere in cache le risposte e abilitare uso offline e notifiche push. È il fondamento delle Progressive Web App. Poiché controlla i fetch, va scopato con attenzione e aggiornato attraverso un ciclo di vita definito.
Progressive Web App (PWA)
Una Progressive Web App è un sito web che usa capacità moderne del browser - un service worker, un web app manifest e HTTPS - per essere installabile, funzionare offline e comportarsi come un'app nativa. Le PWA offrono una portata simile a quella delle app senza la distribuzione tramite app store. Gli ingredienti chiave sono una strategia offline, un manifest che descrive icone e modalità di visualizzazione e un'interfaccia responsive e accessibile.
Gestione dello Stato
La gestione dello stato è la disciplina di archiviare, aggiornare e condividere i dati dell'applicazione attraverso l'albero dei componenti in modo prevedibile. Le opzioni vanno dallo stato locale di componente e dal context a librerie dedicate (Redux, Zustand, Pinia, NgRx) e a primitive reattive (signal). La linea guida è mantenere lo stato il più locale possibile e centralizzare solo ciò che deve essere condiviso.
Code Splitting
Il code splitting spezza il JavaScript di un'applicazione in chunk più piccoli caricati su richiesta - tipicamente per route o per componente pesante - invece di un unico grande bundle. Riduce il download iniziale e il time-to-interactive. I bundler lo implementano tramite import() dinamico e routing lazy a livello di framework, e si abbina naturalmente al lazy loading.
Content Security Policy (CSP)
Una Content Security Policy è un header di risposta HTTP che indica al browser da quali sorgenti può caricare script, stili, immagini e altre risorse, mitigando il cross-site scripting e l'iniezione di dati. Una CSP rigorosa basata su nonce è un forte controllo di difesa in profondità per le app front-end. Va calibrata con cura per non rompere script inline legittimi e widget di terze parti.
Cross-Site Scripting (XSS)
Il cross-site scripting è una vulnerabilità in cui un attaccante inietta uno script malevolo che viene eseguito nel browser di un altro utente nel contesto di un sito fidato, sottraendo dati o dirottando sessioni. Le difese front-end principali sono la codifica contestuale dell'output, trattare ogni input utente come non fidato, evitare innerHTML con dati non sanificati e una CSP rigorosa. I framework fanno escaping automatico dei valori interpolati per default.
Hot Module Replacement (HMR)
L'Hot Module Replacement è una funzionalità del dev server che inserisce i moduli aggiornati in un'applicazione in esecuzione senza un ricaricamento completo della pagina, preservando lo stato e velocizzando il ciclo modifica-aggiornamento. Vite e webpack la forniscono. È un'ottimizzazione solo di sviluppo e non incide sui bundle di produzione.
Tailwind CSS
Tailwind CSS è un framework CSS utility-first che fornisce classi a basso livello e a scopo singolo (come flex, pt-4, text-center) composte direttamente nel markup, con uno step di build che elimina gli stili inutilizzati. Baratta i nomi di classe semantici per velocità e coerenza, imponendo un design system tramite token di configurazione. I critici notano un markup verboso; i sostenitori ne apprezzano la manutenibilità su larga scala.
Debouncing e Throttling
Debouncing e throttling sono tecniche per limitare la frequenza con cui una funzione viene eseguita in risposta a eventi frequenti come scroll, resize o digitazione. Il debouncing attende che l'attività si fermi per un dato ritardo prima di scattare una volta; il throttling scatta al massimo una volta per intervallo. Entrambi riducono il lavoro inutile e migliorano la reattività, e sono comuni negli handler di ricerca-mentre-digiti e di scroll infinito.