DanLevy.net

Lezioni apprese aggiornando il mio blog

Astro, Tailwind, MDX, Pagefind e altro!

Recentemente, ho iniziato un percorso per aggiornare il mio sito Gatsby v1 di 8+ anni.

Questo post condividerà alcune lezioni imparate durante il processo e le tecnologie interessanti esplorate.

Indice

Requisiti del progetto

Prima di immergermi nell’aggiornamento, ho stabilito un insieme di requisiti:

Dato che il mio blog riceve un numero molto variabile di visualizzazioni giornaliere, ho pensato che un sito generato staticamente in anticipo mi offrisse le prestazioni desiderate senza aggiungere complessità extra.

Inoltre, dovevo mantenere le funzionalità esistenti del sito, tra cui:

Scelta dello stack tecnologico adatto

Nel corso degli anni ho lavorato con molti strumenti per siti statici, da Jekyll, Hugo, Slate e Gatsby. Nonché con molti framework front-end: Ember, Knockout, Angular, Vue e ovviamente React.

Quindi, ho precisamente troppe opzioni, che alla fine ho ridotto a Remix, Next.js e Astro,

Potrei scrivere un’intera serie di blog sul mio processo di valutazione, ma qui farò un riepilogo:

Ho scelto Astro per quanto velocemente potessi fare cose significative.

La loro API è sorprendentemente semplice. È un ottimo equilibrio tra flessibilità e buone opinioni di design.

Era rassicurante che Astro non abbia una chiara preferenza per il cloud o un’agenda framework.

Astro non è l’unica tecnologia che ho usato, ecco una panoramica completa dello stack:

Astro: Curva di Apprendimento e Funzionalità Principali

Astro è diventato rapidamente il pilastro del mio aggiornamento.

Ecco alcune funzionalità che ho trovato particolarmente utili:

Alcune cose erano un po’ sorprendenti, come lo styling intorno al markup iniettato da Astro e l’effetto di display:contents.

<style>astro-island,astro-slot,astro-static-slot{display:contents}</style>

Confronto tra .astro e componenti client

I componenti Astro sono essenzialmente modelli HTML con un modello di componenti e props potente. Possono recuperare dati al momento della costruzione, accedere a risorse backend e nascondere informazioni sensibili.

Il modo migliore per comprendere i componenti .astro di Astro è confrontarli con i componenti lato client. (React, Vue, Svelte, ecc.)

Cosa devi fare?Componente .astroComponente client
Generare HTML con un modello di componenti potente✅❌
Recuperare dati al momento della costruzione✅❌
Accedere a risorse backend (direttamente)✅❌
Nascondere informazioni sensibili (token di accesso, chiavi API, ecc)✅❌
Ridurre il JavaScript lato client✅❌
Usare componenti client (React, Vue, Svelte, ecc)✅✅
Aggiungere interattività ed event listener (onClick(), onChange(), ecc)❌✅
Usare Stato ed Effetti di ciclo di vita (useState(), useReducer(), useEffect(), ecc)❌✅
Usare API solo del browser❌✅
Usare hook personalizzati che dipendono da stato, effetti o API solo del browser❌✅

CSS moderno: Wow

Tornando allo sviluppo frontend, sono rimasto sorpreso dagli avanzamenti delle funzionalità native CSS:

Ricerca: Pagefind

Implementare una ricerca sul sito senza servizi terzi o hosting di database sembrava una sfida divertente. Dopotutto, non è come se avessi 10.000 post da indicizzare (ancora.)

Navigando tra le integrazioni della community Astro ho scoperto uno strumento fantastico di cui avrei voluto sapere prima: Pagefind.

Pochi strumenti risolvono un problema tanto bene quanto Pagefind risolve la ricerca su sito locale.

La semplicità nell’implementare Pagefind è una gioia. Può essere integrato con qualsiasi contenuto di un sito statico, e puoi scegliere se utilizzare un’interfaccia predefinita o costruire qualcosa di personalizzato a tuo piacimento.

Risolveva perfettamente ogni mia esigenza. L’integrazione ha richiesto solo pochi minuti, e la maggior parte del lavoro consisteva nell’aggiungere un tag <div id="search"></div> e un po’ di stile!

Commenti: Utterances

Purtroppo ho dovuto salutare Disqus e i commenti accumulati negli anni.

Volevo un controllo e una visibilità migliori sugli script di terze parti sul mio sito.

Inoltre, doveva essere semplice e mantenibile.

Mi ha portato a scegliere il fantastico servizio Utterances. Il suo sistema di commenti basato su GitHub (issues) si allinea bene con il mio pubblico. Inoltre, è facile da configurare e gratuito.

Tailwind: Regretti

C’è solo un aspetto tecnologico di cui mi sto sempre più pentendo di aver utilizzato: Tailwind.

Nel tempo, posso percepire la differenza di costo tra scriverlo e mantenerlo. Tailwind è così veloce da scrivere, però una volta che diventa abbastanza complesso, può diventare noioso da leggere e estendere.

Conclusione

Aggiornare il mio vecchio sito Gatsby v1 a uno stack moderno costruito intorno ad Astro è stata un’esperienza divertente. 10/10 lo consiglierei.

Se stai valutando di aggiornare un sito vecchio o di costruire un nuovo sito statico (o ibrido), ti consiglio vivamente di considerare Astro. La curva di apprendimento potrebbe essere ripida in alcuni momenti, ma i benefici in termini di prestazioni, esperienza dello sviluppatore e protezione del tuo progetto per il futuro ne valgono sicuramente la pena.

Loading comments...