newsletter_optin
Invalid Name Invalid Email
You must accept the Terms!
Light
Dark
Andrea Raponi

LINKS

Esperimenti da Front-end Dev

per una settimana, vestendo i panni di un moderno front-end developer, ho provato a trasformare il mio sito statico in una moderna PWA.
Stories - 11 Dicembre 2021

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.

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 create-strapi-app@latest 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!