Light
Dark
Andrea Raponi

LINKS

Esperimenti da Front-end Dev

11 DICEMBRE 2021

Tagged: Dev

La premessa che mi sento di fare, prima di iniziare a scrivere questo post, è la seguente: non sono un front end developer 😄 della serie, io metto le mani avanti perchè i risultati sono proprio sotto gli occhi di tutti 😎

Catturato dalla scia di questa orda impazzita di gente che vuole fare TUTTO in javascript, ho preso a calci l'idea di avviare un nuovo entusiasmante sideproject e ho dato il benvenuto alla "malsana idea" di buttare il mio vecchio sito statico e di farne una moderna PWA.

Ma perchè? 😱

Un po' per l'hype del momento, un po' perchè il mio focus è prevalentemente su altri linguaggi di programmazione, un po' perchè da buon nerd tutte le cose che "luccicano" vanno provate, almeno una volta.

Dopo una lunghissima coda sul Grande(issimo) raccordo anulare 🤢 ho mentalmente unito quelle che secondo me sono le tecnologie backend/frontend javascript più interessanti.

L'idea primordiale era quella di importare da un mio vecchissimo blog tutti gli articoli, ma poi quando ho visto che c'era roba in php ho immediatamente abbandonato l'idea. È giusto gettarsi (fortissimo) alla spalle il passato.

Strapi - Sveltekit - Tailwind 😍

ho messo tutto in un calderone, 7 giorni a 20 gradi e quello che avete sotto il naso è il risultato della mia primissima PWA.

Strapi è un headless cms scritto in node abbastanza popolare, le mie perplessità sull'ecosistema NPM magari me le tengo per un altro post, apro e chiudo parentesi: voi ve la ricordate la storia di leftpad?

Ad ogni modo mi tappo il naso e attraverso la stanza, proprio come quando mamma preparava i broccoli. Il mio viaggio più o meno così:


npx [email protected] my-project --quickstart

Strapi non ha bisogno di troppe presentazioni, fa quello che promette senza troppi problemi, ricreare una struttura tipica di un blog non porta via più di 5 minuti, compreso lo startup, un comando. A me serve una cosa semplice, veloce e abbastanza affidabile, ma cosa ancora più importante: non ho il tempo per poter riscrivere da zero un headless cms nel tempo massimo che mi sono dato per dedicarmi a questo progetto, una settimana.

Inizio prima sega mentale 🧐

Nonostante io abbia chiuso totalmente il backend di strapi al "mondo", non mi sento proprio a mio agio a lasciare che sia lui ad esporre le mie apis e quindi attualmente sto pensando di filtrare ulteriormente le chiamate e passarle ad un middleware scritto da me in kotlin utilizzando un piccolo e snello framework web: Javalin.

Fine prima sega mentale 🧐

Nella parte (fatta con i piedi) di frontend, ho unito i puntini con Sveltekit e dato un'imbiancata ai muri col meraviglioso Tailwind, è stato amore a prima vista. La semplicità con cui tailwind ti permette di dare vita al layout è davvero impressionante, bisogna però avere una buona base di CSS, altrimenti si rischia di perdersi nella (meravigliosa) documentazione.

Si, lo so, Sveltekit è ancora un esperimento, che a mio avviso funziona già egregiamente! Nutro sempre dei forti dubbi sul suo router interno, ma mi sono lasciato trasportare dall'enfasi e ho lasciato tutto così com'è. È comunque anche lui ben documentato. A Sveltekit ho avvitato un service worker che si occupa della cache e della navigazione offline, ho imbellettato i contenuti con qualche smile 🎅🏽🎅🏽 e ho passato tutto a quel simpaticone di lighthouse:

lighthouse

e quel 97%?!? 😤

Secondo google dovrei giocar meglio con i contrasti dei miei pulsanti in sidebar:

ma io che...

e, se vi siete persi il video del macellaio, siete ancora in tempo per recuperare. 😂

Ad ogni modo ho lasciato i contrasti come piacciono a me, e ho giurato a me stesso che quel 97% me lo farò andar bene 😂

È solo una beta

Parliamoci chiaramente: è solo una beta, non ho avuto tempo e modo per poter rifinire ogni dettaglio come avrei voluto, ci sono diverse cose che vorrei far funzionare in modo diverso, ma è proprio questo il bello dei sentieri ancora inesplorati: bisogna perdersi per sapersi poi ritrovare

Idee, Consigli, Suggerimenti?

in alto ☝🏼 trovate i miei contatti, sarò felice di ascoltare i vostri consigli in merito!