DanLevy.net

IT

Lezioni Apprese Aggiornando il Mio Blog

Astro, Tailwind, MDX, Pagefind e altro ancora!

Recentemente, mi sono imbarcato in un viaggio per aggiornare il mio sito Gatsby v1 di oltre 8 anni.

Questo post condividerà alcune lezioni che ho imparato durante questo processo e le interessanti tecnologie che ho esplorato.

Table of Contents

Project Requirements

Prima di immergermi nell’aggiornamento, ho stabilito una serie di requisiti:

Poiché il mio blog riceve un numero altamente variabile di visualizzazioni di pagina giornaliere, ho pensato che un sito generato staticamente in anticipo mi avrebbe dato le prestazioni desiderate senza complessità aggiuntive.

Inoltre, dovevo mantenere i contenuti e le funzionalità esistenti di questo sito, tra cui:

Choosing my Right Technology Stack

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

Quindi, ho esattamente 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 lo riassumerò qui:

Ho scelto Astro per la rapidità con cui potevo fare cose significative.

Il design delle loro API è rinfrescantemente semplice. È un ottimo equilibrio tra flessibilità e buone opinioni di design.

È stato rassicurante che Astro non abbia alcun evidente bias cloud o agenda di framework.

Astro non è stata l’unica tecnologia che ho utilizzato, ecco un elenco completo dello stack:

Astro: Learning Curve and Key Features

Astro è diventato rapidamente la pietra angolare del mio aggiornamento.

Ecco alcune funzionalità chiave che ho trovato particolarmente utili:

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

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

Comparazione tra componenti .astro e Client Component

I componenti Astro sono essenzialmente template HTML con un potente pattern di componenti e props. Possono recuperare dati in fase di build, accedere a risorse backend e mantenere certe informazioni sensibili nascoste.

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

Cosa devi fare?Componente .astroClient Component
Generare HTML con un potente pattern template+componente✅❌
Recuperare dati in fase di build✅❌
Accedere a risorse backend (direttamente)✅❌
Mantenere informazioni sensibili nascoste (token di accesso, API key, ecc)✅❌
Ridurre il JavaScript lato client✅❌
Utilizzare Client component (React, Vue, Svelte, ecc)✅✅
Aggiungere interattività e listener di eventi (onClick(), onChange(), ecc)❌✅
Utilizzare State e Lifecycle Effects (useState(), useReducer(), useEffect(), ecc)❌✅
Utilizzare API disponibili solo nel browser❌✅
Utilizzare custom hook che dipendono da state, effects o API disponibili solo nel browser❌✅

Modern CSS: Wow

Tornando allo sviluppo frontend, sono rimasto piacevolmente sorpreso dai progressi del CSS nativo:

Search: Pagefind

Implementare una ricerca nel sito senza servizi di terze parti o hosting di database sembrava una sfida divertente. Dopotutto, non è che abbia 10.000 post da indicizzare (per ora.)

Mentre navigavo tra le integrazioni della comunità di Astro ho inciampato in un fantastico strumento che avrei voluto conoscere prima: Pagefind.

Pochi strumenti risolvono un problema così bene come Pagefind risolve la ricerca locale nei siti.

La semplicità di implementazione di Pagefind è una delizia. Può essere integrato con QUALSIASI contenuto di siti statici e puoi scegliere se vuoi un’interfaccia predefinita o costruire qualcosa di personalizzato se preferisci.

Ha risolto perfettamente tutto ciò che volevo. Ci sono voluti solo minuti per integrarlo e la maggior parte del lavoro ha comportato l’aggiunta di un tag <div id="search"></div> e un po’ di styling!

Comments: Utterances

Sfortunatamente, ho dovuto salutare Disqus e i commenti che avevo accumulato in molti anni.

Volevo un migliore controllo/visibilità sugli script di terze parti sul mio sito.

Inoltre, doveva essere semplice e manutenibile.

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

Tailwind: Regrets

C’è solo una tecnologia che sto sempre più rimpiangendo di aver usato: Tailwind.

Col tempo, riesco a sentire la differenza di costo tra scrittura e manutenzione. Tailwind è così veloce da scrivere, tuttavia una volta diventato abbastanza complesso, può diventare tedioso da leggere ed estendere.

Conclusion

Aggiornare il mio vecchio sito Gatsby v1 a uno stack moderno basato su Astro è stata un’esperienza divertente. 10/10, lo consiglio vivamente.

Se stai considerando di aggiornare un vecchio sito o costruirne uno nuovo statico (o ibrido), consiglio vivamente di dare un’occhiata ad Astro. La curva di apprendimento può essere ripida a volte, ma i benefici in termini di prestazioni, esperienza dello sviluppatore e messa in sicurezza futura del tuo progetto valgono bene lo sforzo.

Loading comments...