Come ho pensato e sviluppato il mio sito

Avere un sito personale, dove poter scrivere liberamente delle mie passioni e di quello che mi passa per la testa è sempre stata una mia idea. Ovviamente non con secondi fini specifici o per andare a caccia di like e approvazioni vox populi, ma semplicemente un luogo virtualmente tutto mio che in qualche modo mi rappresentasse sia nella forma (aspetto, UX&UI) che nella sostanza (tipologia di approccio, argomenti trattati, tono e via discorrendo). Nel 2016 riuscii finalmente a registrare il dominio fabiomuzzi.com, dopo una attesa durata parecchi anni e pensavo. inconsciamente, che la strada sarebbe stata davvero in discesa. Partii con tutte le buone intenzioni del caso e con davvero tanto entusiasmo e trascinato dalla moderna tecnologia e dai moderni CMS seguii quella che mi sembrava essere la strada più semplice CMS Wordpress così da dovermi preoccupare solamente di scegliere il template, installare i soliti plugin e via. Sicuramente Wordpress ha dalla sua una facilità di utilizzo e una infinita possiiblità di personalizzazione, offerta dai numerosi plugin e numerosi template sviluppati in tutto il mondo, unica sul mercato. Ma come spesso mi accade, le soluzioni semplici tendono a non piacere e a stancarmi presto. Nonostante tutte le possibili ottimizzazioni del caso, template e plugin installati, rendono un sito Wordpress tendenzialmente lento nel caricamento e anche le opzioni offerte per modificare o personalizzare un template sono tutto sommato limitate. Per risolvere il problema e rendere il tutto più veloce scelsi di passare ad un hosting con SSD rispeto ai tradizionali ma più lenti HDD meccanici; notai un leggero miglioramento in termini di velocità ma rimanevo sempre non pienamente soddisfatto da tutto il resto. Così, in attesa di capire il da farsi, utilizzai un template base per creare una unica landing con il mio cv una breve sezione about e nulla più. Ad inizio 2017 iniziai così a guardarmi intorno per cercare di trovare una soluzione alternativa che mi permettesse finalmente di avere un sito live che mi piacesse. Nello stesso anno diventai papà, a maggio, e come d'incanto, l'arrivo di Alice ha mandato letteralmente in letargo la mia anima nerd/tech: ora c'era altro a cui pensare a cui dedicare tutto me stesso. Tuttavia l'idea del sito è sempre rimasta nei miei pensieri. Due pagine completamente bianche: un foglio di stile "css" e un index. Senza vincoli o altro, ho inziato a scrivere, guardando qualche layout, trovando qualche pezzo di codice in rete, montando e smontando il tutto diverse volte, fino ad arrivare a quello che vedete oggi: spero vi piacca!

Il 2020 verrà ricordato nei libri di storia come l'anno in cui l'intera umanità avrebbe familarizzato con 2 concetti impensabili ad giorno d'oggi: pandemia e lockdown. Il non poter più uscire, neanche nei weekend o semplicemente a bersi una birra e vedere una partita, ha avuto degli impatti anche a livello di stanchezza fisica e ovviamente di sonno. Sin da piccolo, non sono mai riuscito ad andare a letto presto, anzi, approfittando del silenzio e del pc in camera, spesso passavo le notti al pc per giocare e sperimentare configurazioni estreme, sia a livello software che hardware. Fossi stato più giovane avrei probabilmente ripreso a giocare a Football Manager, così da portare il Catanzaro a vincere Coppe e Campionati; ma i tempi cambiano e anche le passioni mutano. E così, tra una lettura ed un'altra e dopo aver visto diverse serie in TV, ho deciso di investire del tempo extra nello sviluppo del sito. Ho in sostanza deciso di riprendere a sviluppare.

Il sito, oltre ad essere estremamente personale e personalizzato, doveva avere 3 requisiti chiave:

  • ottimizzazione: snello e veloce in fase di caricamento e navigazione con sezioni personalizzate e personalizzabili sulla base dei diversi contenuti
  • aspetto: interfaccia pulita che riesca a raccontare qualcosa di me anche a livello di layout, di colori e font e di usabilità in generale. Facilmente aggiornabile nel tempo tanto nella forma quanto nella sostanza
  • costo: se si esclude il costo dell'hosting e del dominio, non deve avere ulteriori costi monetari

La prima settimana l'ho interamente investita in tutta una serie di operazioni preliminari, utili per avere tutto perfettamente configurato e potermi dedicare interamente a layout, css e container. Per prima cosa ho rispolverato il mio vecchio Macbook Pro, configurandolo come macchina per lo sviluppo; successivamente ho cercato un servizio di CDN, letteralmente Cloud Delivery Network, ovvero un posto dove pubblicare le immagini, di modo da utilizzare tutta la bande del mio hosting solo per le operazioni di caricamento del sito e sfruttare la banda in CDN per il caricamento delle immagini. Successivamente ho cercato un editor semplice e potente e soprattutto multi piattaforma che mi consentisse di sviluppare in piena libertà da qualsiasi device. Alla fine la scelta è ricaduta su VSCode e Brackets. Il primo sviluppato da Microsoft, è oggi ritenuto probabilmente il più potente e completo software di sviluppo; il secondo invece è stato sviluppato da Adobe, snello e minimale e con integrazione totale con la suite Adobe. Alla fine, dopo un po' di tentativi e di switch ho finito per utilizzare principalmente Brackets e tutti i suoi plugin. Ultimo passo è stata la configurazione di tutte le scorciatorie da tastiera per richiamare le diverse funzioni utili in fase di sviluppo e scrittura codice. Lo sviluppo delle prime sezioni è andato via liscio, con pochissimi intoppi, legati principalmente a tutta la parte di ottimizzazione mobile e design responsive. E così nel giro di circa 2 settimane, sono riuscito ad avere la prima bozza completa di struttura, ingombri e funzionamento generale del sito, contact form incluso. Le ultime 2 settimane le ho dedicate invece allo sviluppo della sezione about e ovviamente a tutti i fine tuning prima della messa live. Insomma possiamo considerare un mese di lavoro per avere tutto pronto e pubblicato.

Veder prendere vita il sito è stato forse il momento più bello di tutto il processo, stringa dopo stringa, div dopo div, ogni sezione prendeva le forme e i colori impostati. Media dopo media il layout diventata estremamente responsive e pulito, proprio come era nella mia idea iniziale. E tutto veloce, dannatamente velocemente: il caricamento della home, delle gallery e di tutte le anteprime, le varie animazioni. Semplicemente fantastico.

La cosa che più mi ha sorpreso nell'andare a sviluppare il sito, sono i numerosi repository di codice disponibili online, tutti gratis. Per le gallery, per il contact form, la rete è piena zeppa di materiali pronti all'uso e di utenti, o per meglio dire persone, sempre pronte a fornire soluzioni e dare consigli su come risolvere tutti i problemi in cui si inciampa quanto di sviluppa un sito. Risorse che se da una parte sono state davvero molto utili per implementare alcune funzioni sul mio sito, dall'altra dimostrano ancora una volta quale può essere il potere della rete e della condivisione.

Al momento il risultato mi soddisfa pienamente: il sito mi piace, mi consente di pubblicare diverse tipologie di articoli adattandosi perfettamente a quelle che sono le mie attuali esigenze. È interamente responsive e perfettamente fruibile tanto da desktop quanto da mobile. È snello e veloce e dai primi test, usare la CDN per gestire le immagini, mi consente di risparmiare parecchia banda, che tradotto in soldoni vuol dire maggiore fluidità e velocità nell'esperienza di navigazione. Sia chiaro non ho al momento pretesedi alto traffico o altro; il mio scopo al momento è appunto quello di avere uno spazio virtuale tutto mio dove dare libero sfogo alle mie passioni. Ho costruito nel mente anche la sezione blog, dove al momento, riesco a pubblicare con buona cadenza articoli e curisiotà su di me, su mia figlia e sulle mie passioni. Ci sono sicuramente aree di miglioramento, ma al momento preferisco concentrarmi sulla pubblicazione e sulla scrittura, così da arricchire il sito. Ovviamente non avendo un CMS per gestire la pubblicazione degli articoli, tutto viene fatto direttamente via codice, dandomi sempre la possibilità di personalizzare sia la forma che l'aspetto dell'articolo stesso, magari implementando nuovi funzioni; di contro non ho quella velocità da copy&paste che ad esempio offre Wordpress. Ma mi sta bene così, ogni articolo è una storia nuova e anche se utilizzo la stessa base, posso sempre apportare qualche modifica qua e là. Inoltre, il dover scrivere mi aiuta anche a mantenere fresche tutte le nozioni e le competenze apprese durante lo sviluppo integrale del sito.

Anche a livello di costi, sono riuscito ad avere impatto zero. Al momento infatti gli unici costi che sostengo sono quelli legati a dominio e hosting. Riassumendo:

  • Struttura sito: sviluppato in HTML 5 e Javascript per alcuni moduli e funzioni. Alcuni pezzi di codice presi su repository GITHUB gratuiti
  • Namecheap: piano hosting Stellar Plus con certificato SSL incluso. Unlimited bandwitch e storage su SSD - Costo annuale 20$
  • Google Domains: provider dominio sito - costo annuale 12€
  • Brackets: editor testuale con installati i seguenti plugin: Beautify. per abbellire il codice; Minify: per creare file css più snelli e leggeri. Ho aggiunto poi alcuni plugin e temi per rendere l'ambiente di test e coding più bello e funzionale.
  • Cloudinary Servizio di hosting per le immagini, completamente gratuito. Offre la possibilità di caricare qualsiasi tipo di file da utilizzare poi all'interno del sito. Sono presente diverse guide utili per sfruttare al meglio tutte le funzionalità integrate, quali ad esempio la possibilità di inserire firma e bordi alle foto direttamente via codice senza passare da Photoshop.
  • Material Design e Mobirise: library icone completamente gratuite. Offrono la possibilità di scegliere e personalizzare le icone direttamente in fase di sviluppo via codice, senza inserire immagini, rendendo di fatto il sito decisamente più veloce e snello
  • Contact form: sviluppato in formato php e preso interamente da repository GitHub. Riadattato solo a livello layout per renderlo coerente con il resto del sito
  • Metatags.io: tool utilizzato per generare tutti i tag per anteprime immagini, title e description per condivisione sito.
  • Per sviluppare ho usato un Macbook Pro del 2015 e un Google Pixelbook; Filezilla per caricare i file e Firefox/Chrome per testare il tutto.