Vai al contenuto
SIMONE PIZZI
Progetti ↗
Simone Pizzi Web Site

Simone Pizzi Web Site: il Sito che state leggendo...

Credo sia giusto dare spazio, annoverandolo come mio lavoro di sviluppo web, anche questo sito che state navigando. Due chiacchiere su Simone Pizzi Web Site

Data
Lettura
5 minuti
Sezioni
4
Copertina: Simone Pizzi Web Site: il Sito che state leggendo...

C'è un vecchio proverbio che parla del calzolaio che gira con le scarpe bucate. Non è esattamente il mio caso, ma me ne sono reso conto solo in questi giorni spulciando il mio stesso archivio: parlo di videogiochi, sviscero le architetture dei miei software, pubblico racconti e testo ossessivamente le intelligenze artificiali. Eppure, in tutto questo tempo, ho ignorato il convitato di pietra.

Non ho mai dato la dignità di "Progetto Ufficiale" al contenitore stesso. A questo sito.

Se aprite la sezione dedicata ai miei lavori software, troverete i miei tool, le mie regie audio, ma non troverete menzione dell'infrastruttura su cui state navigando. È stato un errore di prospettiva da parte mia, figlio di come questo spazio è nato e di come, inevitabilmente, si è ribellato alla sua natura originaria.

Da vetrina a creatura viva

All'inizio, il patto era semplice: questo dominio doveva essere il mio portfolio. Una pagina pulita, una griglia ordinata, i miei lavori messi sotto teche di cristallo virtuali. Lo scopo di un portfolio, dopotutto, è farsi da parte per lasciar parlare i progetti.

Ma poi ho iniziato a scrivere.

Ho iniziato a buttare giù appunti di sviluppo, riflessioni sul codice, frammenti narrativi. E ho notato una cosa interessante: il traffico organico, quello vero delle persone che tornano, non arrivava per guardare la vetrina. Arrivava per leggere il blog. L'impalcatura aveva preso il sopravvento sull'edificio, e la cosa mi stava benissimo.

Avevo bisogno di una cabina di regia. E così, questo sito è diventato la mia cavia da laboratorio per eccellenza.

Il laboratorio segreto del "Thin Stack"

Se mi seguite, sapete che non amo le infrastrutture inutilmente gonfie. Odio l'idea di dover noleggiare server Node.js costosi o affidarmi a servizi cloud complessi solo per far girare un blog in React. Il mio credo è il Thin Stack: React 19 e Tailwind sul frontend per un'esperienza utente magnifica, e un robusto cuore in puro PHP 8 e MySQL sul backend. Nessun framework di mezzo, nessun intermediario.

Negli ultimi giorni, ho letteralmente smontato e rimontato questo motore in corsa. E non è stata una passeggiata.

Ho riscritto l'intero sistema di routing passando all'architettura Render-as-you-Fetch di React Router 7. Prima le pagine si aprivano, mostravano uno spinner e poi caricavano i dati. Ora? I loader paralleli estraggono i dati mentre la transizione è ancora in corso. Il risultato è una navigazione istantanea, accompagnata da transizioni fluide in dissolvenza che danno a tutta l'esperienza un feedback tattile e "premium".

E per evitare che io stesso perdessi il lavoro di ore per una chiusura accidentale del tab, ho implementato un sistema di auto-salvataggio locale silente. Se il browser crasha mentre scrivo un articolo nel nuovo editor Tiptap, al riavvio il sistema se ne accorge e mi restituisce la bozza esatta. Quality of Life, la chiamano. Io la chiamo sopravvivenza.

La grande guerra del SEO

Ma la vera epifania, la battaglia che mi ha tolto il sonno, è stata quella per l'indicizzazione.

Le Single Page Application (SPA) in React hanno un difetto congenito: quando i bot di Google passano a leggere il sito, trovano solo una scatola vuota (<div id="root"></div>). Javascript viene eseguito dopo, ma spesso Googlebot non ha il tempo o la voglia di aspettare. Il risultato? Avevo 30 articoli scritti col sangue e Google ne vedeva... uno.

La soluzione standard del mercato è usare enormi server SSR (Server-Side Rendering) in Node. Ma questo avrebbe tradito la filosofia del Thin Stack.

Così ho sviluppato un SEO Engine ibrido in puro PHP. L'ho chiamato v2.0.
Ora, quando una richiesta bussa al mio server, il backend controlla chi è. Se sei un essere umano, ti serve istantaneamente la SPA in React, fulminea e reattiva. Ma se sei un crawler di Google, Bing o un bot di Telegram, il server PHP intercetta la chiamata, interroga il database MySQL, assembla un HTML completo di tutto (titoli, testo, immagini, dati strutturati JSON-LD) e glielo serve su un piatto d'argento.

Google ora vede tutto. E la mia foto in homepage, che prima pesava 2 Megabyte? L'ho passata al setaccio convertendola in WebP: ora pesa 121 Kilobyte. Un risparmio del 94%, caricato prima che abbiate il tempo di sbattere le palpebre.

Dalla trincea alla carta

C'è una ragione precisa se vi sto raccontando i dettagli di queste cicatrici tecniche.

Tutti questi log di errore risolti alle tre di notte, la gestione gerarchica infinita delle categorie, il motore di ricerca globale attivabile con Ctrl+K, e l'adeguamento certosino alle normative GDPR per cookie e newsletter... tutto questo sta diventando inchiostro.

Quasi ogni pattern, ogni riga di codice documentata, ogni soluzione architetturale esposta nel mio manuale — React + PHP: The Thin Stack — è stata testata, rotta e riparata proprio su questo dominio. E il lavoro furioso di questa ultima settimana è appena confluito in quello che, a tutti gli effetti, costituisce l'ossatura per la Seconda Edizione del libro.

Se il libro è la teoria, simonepizzi.runtimeradio.it è la pratica viva e sanguinante.

È arrivato il momento di fare pace con questo spazio. Smetterò di considerarlo solo l'invisibile telaio che regge i miei contenuti. Da oggi, questo ecosistema ibrido si guadagna di diritto il suo posto in cima alla mia lista dei Progetti Software.

Perché a volte, il lavoro di cui andare più fieri non è quello che esponi nella vetrina. È la vetrina stessa.

Ogni tanto scrivo una lettera

Nessuna cadenza fissa, nessun riassunto automatico: parte solo quando ho qualcosa da raccontare. In fondo a ognuna c'è il link per uscire.

↑ Su

Cerca nel sito

Condividi

L'indirizzo di questa pagina:

Scrivi a Simone

Segnalazioni, correzioni, o solo per dire che una cosa non funziona: quest'ultima è la più utile di tutte.