Come ho fatto questo sito
Roma (RM)
Passare le giornate a non pensare ad altro se non al codice, a come si fa questo, a come si fa quello. Dalla mattina mentre correvo alla sera mentre passeggiavo in paese con un qualche tutorial in cuffia, davanti al MacBook Pro 13 M1, col quale ho fatto tutto per tre settimane - e dal quale scrivo ancora adesso - ho guardato decine di video, letto documentazione, chiesto aiuto su Reddit, e scritto messaggi a chi condivide il codice su GitHub.
Tutto è stato fatto a mano, non ho usato template o starterkit. Volevo qualcosa di essenziale, volevo costruire i mobili come Wittgenstein. Ho re-inventato la ruota diverse volte e ho riscritto il codice man mano che capivo. E ho faticato ad accettare dei compromessi. Il sito non è finito perché ho iniziato a studiare soltanto adesso. Ho registrato un video per spiegare meglio la struttura del sito e motivare certe scelte di design ma, attenzione: non sono uno sviluppatore, posso sbagliarmi, quindi prendete quello che segue come il parere di uno smanettone.
Tra il mettere in piedi dei siti statici con Hugo e il portare avanti un’idea poco chiara ce ne passa, fidatevi. Ti trovi davanti alla tua ignoranza. Sai cosa vuoi fare ma non hai idea di come farlo. Non sai come si chiamano le cose, non conosci le sintassi e perdi ore su delle graffe messe male. Ma è stato uno spasso e la conferma che tutto il mio modo di fare, quello che negli anni ho chiamato “approccio”, è solo una questione di design e di usabilità. È la ricerca di una stabilità e di un mondo che funziona senza se e senza ma. Mi piace. Ci sguazzo. E ora non voglio andare altrove.
Quali software
Pressappoco è fatto con SvelteKit e TailwindCSS. Tra i plugin npm ci sono Howler per gli effetti audio e per il player dei vocali, e MDSvex per le pagine in markdown evoluto. Le poche immagini presenti vengono convertite in .webp da vite-imagetools. Sembrano tante aggiunte ma sono solo comodi pezzetti. Ecco un estratto del package.json attuale.
"devDependencies": {
"@sveltejs/adapter-static": "^1.0.0-next.18",
"@tailwindcss/aspect-ratio": "^0.2.1",
"@tailwindcss/typography": "^0.4.1",
"html-minifier": "^4.0.0",
"mdsvex": "^0.9.8",
"rehype-external-links": "^1.0.0",
"svelte-lazy": "^1.0.12",
"svelte-sitemap": "^2.1.1",
"tailwindcss": "^2.2.4",
"vite-imagetools": "^3.6.8",
"howler": "^2.2.3"
}Il sito è statico, almeno al momento (nota: La home cambierà quando riuscirò a domare <svelte:component> per un effetto infinite loading. ) , quindi generato con adapter-static di SvelteKit in file HTML, CSS e JS. Ed è una PWA quindi si può installare sullo smartphone o sul PC sia per la navigazione offline sia per il caching dei file essenziali al primo caricamento. Gira su Netlify. Non ha cookie interni, né un sistema di tracciamento esterno delle visite perché il calcolo viene fatto sul server con Netlify Analytics. I campioni sonori sono presi da FreeSound. Il codice verrà migliorato (spero!) e cambiato spesso perché mi sono rimaste in ballo due o tre cosette. Tipo.
- L’infinite scroll in homepage: l’implementazione che son riuscito a far funzionare (con un fetch dinamico del json, o con il caricamento della “pagina successiva” via JS) non mi piace così ho pensato di lasciar perdere, studiare ancora, e ritornarci.
- Le notifiche in modalità PWA. Qui si va un po’ oltre, ma mi piacerebbe allinearlo al comportamento di una app nativa, avvertire chi legge di una nuova pagina online, ecc ecc.
- Il codice della modale con ricerca annessa è un caos, e lo stesso vale per il player audio basato su Howler. Devo spezzettarlo in componenti e capire se ha davvero senso usare quel player JS anziché integrare l’iframe di Spotify - e aggiungere un cookie, dannazione.
E non vi dico ancora, perché poi il lavoro da fare spaventa anche me, delle animazioni che vorrei inserire sul logo (con Svelte si lavora sui tracciati svg alla… svelta) e dei componenti che vorrei inserire nelle singole pagine quando sarà necessario, che poi è il motivo per cui ho scelto di usare .svx anziché gli .md testuali. Anche questo è spiegato meglio nel video. Per ultimo, devo rivedere l’indice. Sarebbe utile avere un’anteprima della pagina cliccando sul link, un po’ come la navigazione su Kindle o Kobo, ma non sono riuscito a trovare uno schema che funzioni anche su smartphone. Forse si potrebbe semplicemente scrollare a destra e sinistra per andare avanti e indietro? oppure aprire una modale.
Risorse utili
Svelte richiede delle conoscenze di Javascript, HTML e CSS almeno basilari. Bisogna sapere usare quei due o tre comandi di Node JS e bisogna avere un’idea di cosa si cerca di fare. Non è un framework con pezzi pronti da assemblare, ma è un modo per avere del codice finale leggero - e per fare alla svelta le operazioni più comuni. Non c’è un DOM virtuale. Tutto è basato sui componenti. Si scrivono nel suo codice (HTML, CSS, JS) e lui compila in Vanilla Javascript, tutto qua. Ma bisogna essere consapevoli di cosa occorre e poi controllare se Svelte può rendere lo sviluppo più veloce.
Attenzione: SvelteKit è ancora in beta e tanto potrebbe cambiare con la versione 1.0. Chi non ha basi di programmazione web dovrebbe partire da un corso sulla solita triade. Con un corso non si perde tempo, si impara un metodo, si apre il cervello. Su Javascript non vi so aiutare perché c’è troppa roba in rete ecc ecc. Ma su Svelte vi consiglio questi quattro:
- I corsi di LevelUpTuts.
- La playlist YouTube di Codevolution.
- Il tutorial ufficiale di Svelte.dev.
- Il canale Youtube di Lihautan.
Poi iscrivetevi alla subdir su Reddit e spulciate il canale Discord, leggete la loro newsletter perché fa sempre dei resoconti su cosa è uscito, guardate come gli altri fanno le loro cose, cercate tutorial su Google e, insomma, datevi da fare. Se state pensando di studiare React o di usare Gatsby o Vue, valutate anche Svelte. E, soprattutto, se pensate che vi serva del tempo per provare, per scavare nella vostra passione, per fare quello che vi va di fare, e nel mentre fermare tutto il resto come ho fatto io, fatelo. Un mese, tre mesi, sei mesi di studio: pensate di meritarli?