Understack
Parliamo di un progetto

Stack e metodo

Come costruiamo.

Lo stack cambia. Gli standard no.

Architettura di questo sito

Non è un elenco di tecnologie messo lì per fare volume: è lo stack con cui è costruita la pagina che stai leggendo, con il ruolo effettivo di ogni pezzo.

  1. Presentazione

    Quello che arriva al browser.

    • Tailwind CSS
    • Vite
    • GSAP
    • JavaScript

  2. Template

    Dove i dati diventano markup, senza logica.

    • Twig
    • Timber

  3. Contenuti

    Il backoffice e la struttura editoriale.

    • WordPress
    • ACF Pro
    • Rank Math

  4. Runtime

    Cosa gira sul server.

    • PHP 8.2
    • MySQL
    • Composer

  5. Consegna

    Come il codice arriva in produzione.

    • Git
    • GitHub
    • WP-CLI
    • Staging
    • CI/CD
WordPress

CMS e backend editoriale.

Il team dell’agenzia lo conosce già. Usato come sistema di contenuti, non come generatore di markup.

Timber

Layer fra la logica WordPress e i template.

Separa la preparazione dei dati dalla presentazione: il PHP non stampa HTML e i template non fanno query.

Twig

Template puliti e componentizzati.

Escaping automatico, sintassi leggibile anche da chi non scrive PHP, componenti riusabili senza astrazioni inutili.

ACF Pro

Contenuti strutturati e backoffice.

Ogni contenuto è modificabile dalla dashboard, ma la struttura del layout resta controllata dal tema. Field group versionati in Local JSON.

Tailwind CSS

Sistema CSS con design token espliciti.

Configurazione CSS-first: i token stanno nel CSS, accanto alle regole che li usano. Nessun file di configurazione separato.

Vite

Build e asset pipeline.

Cache busting dal manifest, HMR in sviluppo, configurazione breve e leggibile.

GSAP

Animazioni di ingresso e microinterazioni.

Caricato in un chunk separato dopo il first paint, e solo se in pagina c’è qualcosa da animare. Mai sull’elemento LCP.

Come scriviamo il codice

  • 01

    Componentizzazione

    Un componente si estrae quando la ripetizione è reale, non in previsione. I template restano piccoli e leggibili: oltre le ottanta righe si divide.

    La regola operativa è una sola: i template non contengono logica, il PHP non contiene HTML.

  • 02

    Semantic HTML

    header, nav, main, section, footer, liste vere, button per le azioni e link per la navigazione. Un h1 per pagina e gerarchia dei titoli senza salti.

    Chi apre DevTools deve trovare markup che si legge senza sforzo.

  • 03

    Accessibilità

    Non è una fase finale. Skip link, focus sempre visibile, contrasto AA, touch target adeguati, reduced motion rispettato, form con label reali ed errori annunciati.

    Il sito resta navigabile da tastiera e leggibile con JavaScript disattivato.

  • 04

    Performance

    Il primo elemento visibile è testo: nessuna immagine e nessuna libreria fra l’utente e la prima parola letta.

    Il JavaScript iniziale ha un budget dichiarato ed è verificato in CI: se una modifica lo supera, la build fallisce.

  • 05

    Sicurezza

    Sanitizzazione in ingresso, escaping in uscita, nonce su ogni azione, capability check su ogni operazione privilegiata.

    Nessuna credenziale nel repository, nessuna modifica al core, nessun editor di file attivo in produzione.

  • 06

    Git e ambienti

    Tre ambienti separati, con database distinti. Il codice sale da locale a staging a produzione; il database scende solo nella direzione opposta.

    In produzione arriva solo ciò che è stato approvato in review, con un deploy deliberato.

No unnecessary dependencies.

Il principio non è zero dipendenze: è nessuna dipendenza senza una ragione. Sotto trovi l’elenco completo di ciò che questo sito carica, con il peso reale, e di ciò che abbiamo valutato e deciso di non usare.

DipendenzaPesoPerché
Timber + Twig lato server Separazione fra logica e presentazione. Nessun impatto sul peso della pagina.
ACF Pro lato server Contenuti strutturati e backoffice. Nessun asset caricato sul frontend.
Rank Math lato server Metadati, sitemap e schema. I moduli non usati sono disattivati da codice, non dalla dashboard.
Tailwind CSS 8,8 KB gzip Solo le classi effettivamente usate finiscono nel CSS compilato. Un unico file, con l’hash nel nome: cache lunga e nessuna invalidazione accidentale.
JavaScript del tema 1,7 KB gzip Menu mobile con focus trap e stato dell’header. Nient’altro nel bundle iniziale.
GSAP 28,7 KB gzip, differito Caricato in un chunk separato dopo il first paint, solo se in pagina esiste qualcosa da animare e solo se l’utente non ha chiesto reduced motion. Non entra nel percorso critico. Fa le transizioni; a decidere quando farle partire è IntersectionObserver, che è nativo.
Geist + Geist Mono 52 KB Sans e monospazio disegnate insieme: stesse proporzioni, stesso disegno delle terminazioni. Il monospazio non e’ un carattere estraneo usato per fare “tecnico”, e’ la stessa voce in un altro registro.

Valutate e non usate

  • GSAP ScrollTrigger

    Adottato per legare l’animazione delle schede di codice al progresso dello scorrimento, e poi rimosso. Quel legame produceva stati a metà: fermandosi a mezza corsa si restava con due frammenti sovrapposti, nessuno dei due leggibile. Con transizioni discrete — si attraversa una soglia, parte un’animazione che arriva sempre a destinazione — il requisito è sparito, e con lui undici KB gzip. Lo scorrimento riposa su una tappa grazie allo scroll-snap nativo del CSS, che è del browser e non costa niente.

  • Alpine.js

    Serviva per menu mobile e FAQ. Le FAQ usano details e summary nativi, il menu sessanta righe di JavaScript. Quindici KB per due componenti non si giustificano.

  • Plugin multilingua

    WPML, Polylang e simili aggiungono tabelle, query e un layer di routing. Qui le pagine inglesi sono figlie di una pagina en: i permalink sono nativi, senza una sola rewrite rule scritta da noi.

  • Page builder

    Su questo sito il layout è responsabilità del tema. Il redattore modifica contenuti, non ricompone le pagine.

  • Plugin per i form

    Contatti e candidature sono gestiti nel tema con nonce, honeypot, rate limit e validazione dei file. Meno codice caricato e più controllo su cosa succede ai dati.

  • jQuery

    Rimosso dal frontend. Nessuna riga di codice di questo sito ne ha bisogno.

  • Global styles di theme.json

    Circa sette KB di CSS inline generati per il block editor, mai applicati da un frontend in Twig. Disattivati.

Costruito come costruiamo per i nostri partner.

Questo sito è costruito con lo stesso metodo che usiamo sui progetti dei nostri partner. Le misure sotto sono quelle reali, prese sulla build di produzione.

  • HTML della homepage

    5,9 KB gzip

  • CSS totale

    8,8 KB gzip

  • JavaScript iniziale

    1,7 KB gzip

  • Richieste bloccanti

    2

  • Plugin attivi

    2

  • Page builder

    0