Ho sempre amato i semplici ma contemporaneamente maestosi titoli latini in “de + ablativo” e non ho saputo resistere nel trovare il coraggio di distruggere grandi opere del livello del De bello gallico e De agricoltura intitolando così questo articolo. Allo stesso tempo, come Candido o l’Ottimismo, volevo mettere “o”. Mi sono tolto una soddisfazione.
Premessa
Queste righe vogliono essere una registrazione, un appunto a imperitura memoria, delle intenzioni e delle ispirazioni con cui ho creato questo sito, cioè la versione pubblica e online della mia testa (e poveri noi). In primis, è per me importante sottolineare che ho cercato il più possibile di evitare di renderlo un’apoteosi del mio egocentrismo (a cui, ahimè, talvolta innegabilmente soccombo) o men che meno un posto per mettere in mostra quanto (non) sono bravo. L’ispirazione è nata anni fa da un piccolo pensiero che nella mia testa tamburellava: “perché ti servono i social?” e si è trasformato negli ultimi mesi nella risoluzione di sposare completamente e unicamente strumenti Open Source, abbandonando definitivamente mezzi di comunicazione e programmi di ogni sorta di natura centralizzata o basati su software proprietario entro fine anno. Per questo motivo, ho deciso di scrivere il Manifesto della Libertà digitale, a cui chiunque puotrà contribuire, aggiungendo risorse, riflessioni, informazioni. Cercherò di pubblicare la prima bozza del manifesto entro giugno e presto scriverò un articolo su come in tre mesi ho deciso di abbandonare per sempre Google, Facebook e tutti quei big nominati continuamente.
Intro
Dopo questa dovuta premessa, possiamo dedicarci alla genesi di xplosionmind.
Esisteva una versione precedente del sito, che ho creato utilizzando Wix, in cui prendevo le figurine belle che mi piacevano, le trascinavo con il mouse ed era fatta.
Due mesi fa, invece, ho deciso di programmare il sito da zero. Non ho voluto utilizzare framework, template o copiare e incollare stringhe di codice senza capire il loro significato. È stato un parto. Per tutti i tre mesi della mia quarantena sono stato in balìa dell’ossessione di portare avanti lo sviluppo del sito, sognando il codice la notte e tormentandomi quando non ero in grado di scrivere uno script funzionante per ottenere il risultato che desideravo. Disperato e stanco, mentre programmavo sono riuscito però a prendere appunti e li ho usati per scrivere un articolo più tecnico che descrive ogni passaggio della costruzione. Lì ho messo il cosa e il come, qui il perché.
Sono sempre più innamorato delle storie. Vado in estasi e comincio a tremare dall’entusiasmo ogni volta che scopro una novità su qualcosa che fino a quel momento ha fatto parte della mia quotidianità e io ne ho ignorato le origini. Mentre programmavo, ho cercato il più possibile di assorbire al massimo ispirazioni, cultura, nozioni tecniche e non, esperienze, riflessioni e provato a inserirle qui. Ogni particolare, ogni dettaglio, ogni specifico colore o pulsante sono frutto di una storia, un percorso, uno studio e un innamoramento che li ha portati a essere proprio così. Respingo e rifiuto con tutto me stesso la linea del “metto questo perché è bello”, o “facciamo in modo che sia più accattivante possibile”, e relativi ragionamenti. Ho fortemente voluto evitare di far apparire qui sopra qualcosa senza che avesse motivo di esserci.
Cominciamo.
giallonero
Non ho mai capito nulla di calcio. Proprio non ci ho mai preso, nè a calciare un pallone, nè a capire come funziona il calciomercato e quello che fa un arbitro e tutte quelle cose dei CT presidenti fascia alta ala destra terzino. So solo chi è il portiere. Buffon. Mi sono sempre chiesto come avrei dovuto fare quando un mio amico compagno di classe persona appena conosciuta parente lontano mi chiedeva “che squadra tifi?”
Italia? Dai, scontato. Juve, quella di papà? Booh. Così sorridevo e facevo il furbo come per dire “non è la tua stessa, perciò non te lo dicooooo”. Ecco, chiedendomi che colori avrei dovuto utilizzare per realizzare questa cosa di pixel (cioè questo sito, non riesco a trovare sinonimi per evitare ripetizioni) ho capito. Io tifo giallonero. Che io sappia (perciò mi sbaglio sicuramente), non esistono squadre importanti in Italia che abbiano i colori giallo e nero.
Il giallo e il nero sono i colori dei lavori in corso, del work in progress, del cantiere, dei pilastri nei sottopassaggi che non puoi non vedere altrimenti ti schianti. xplosionmind è esattamente questo, un posto che per sua essenza e definizione è incompiuto, continuamente in cambiamento e, si spera, in evoluzione.
Altri significati importanti attribuiti a questo stupendo binomio di colori:
- è così bello pensare all’inimitabile splendida potente Uma Thurman ogni volta che si apre una pagina nuova. Kill Bill. Giallo e nero sono i colori di Kill Bill (e grazie mille alla mia gemella di entusiasmo Anna Maria di Matera che me lo ha fatto notare);
- l’Ape Maya. Ça va sans dir.
- Essendo colori di cantiere, non posso non ammettere che di mezzo ci sono anche i miei grandiosi pazzeschi potentissimi amici, i Cantiere 164.
Ci sono degli accenni di blu, soprattutto ne La Marmellata>. Motivi: uno il mare, due la marmellata di mirtilli. Eh.
linee
Eccetto che nelle scritte e nei loghi, non esistono curve, qui. È tutto dritto, spigoloso e bidimensionale. Non era mia intenzione, originariamente, comporre qualcosa di “bello”, il mio obiettivo primario era che ci fosse armonia fra gli oggetti. È successo tutt’altro; dubito che vedendo tutti i quadratini e le striscie gialle abbiate avuto un’idea di armonia. Ho trascurato quest’idea iniziale lasciandomi trascinare dalla concezione di complessità e confusione che regnano costantemente in me e in tutte le persone più belle del mondo (le altre persone confuse sono belle, mica io). Per questo, sono arrivato a cercare di esprimere una semplice confusione.
Quando navigo su internet leggendo articoli, studiando concetti, cercando ispirazione, finisco sempre per avere una miriade di pagine aperte, talmente tante che non capisco più nulla. Questa è l’appassionante confusione in cui vivo costantemente, cercando di assorbire il più possibile da quello che vedo, leggo e soprattutto osservo ciò che mi circonda, ma è facilissimo perdersi. Per questo, la confusione, quasi per assurdo, deve mantenere una struttura semplice: devo sempre sapere da dove sono partito e dove voglio arrivare, quanto tempo posso dedicare a perdere la testa in determinati argomenti e se è il caso di approfondire così tanto, più altre mille variabili soggettive. Dunque, se da un lato ho cercato di mettere ovunque più collegamenti possibili fra pagine e rimandi a risorse esterne, mi sono impegnato allo stesso tempo a mantenere costantemente una chiara e intuitiva semplicità di fondo.
Ci tengo a approfondire in particolare un passaggio dell’ideazione del design di xplosionmind. C’è una fantastica storia dietro le linee gialle che stanno nella pagina di atterraggio dello Zibaldone, nelle poesie e nelle categorie, per separare i post.
Mi trovavo ad un punto in cui avevo praticamente concluso la struttura del sito. L’HTML era completo, le basi di CSS inserite e i dettagli grafici ridondanti erano stati definiti. Nonostante questo, mancava qualcosa. Davanti a me, nella pagina dello Zibaldone avevo un elenco di maiuscole bianche, separate da un’interlinea di 1.5rem. Non riuscivo a trovare una soluzione che fosse visivamente bella per distinguere chiaramente fra loro i titoli nell’elenco. Odio con tutto me stesso, non sopporto le lineette sottili che separano le cose, quelle delle tabelle Excel, per capirci, o quelle che separano le varie email in una casella di posta elettronica. Queste:
Grr.
Le possibili soluzioni erano tre:
- Metterle comunque, a costo di rabbrividire ogni volta che avrei aperto lo Zibaldone
- Aumentare ancora più lo spazio fra titoli, per enfatizzare la separazione, trasformando la pagina in un papiro lunghissimo infinito
- Utilizzare colori di sfondo lievemente differenti che si alternano, un po’ come ho fatto in tutto, solamente che non sapevo come impostare uno sfondo diverso solo per le iterazioni dispari in un for loop su Liquid (sto già diventando troppo tecnico. In sintesi: non ero capace).
Come nel corso di tutto il processo creativo di realizzazione del sito, in ogni momento di difficoltà o indecisione, ho preso quello che non sopporto e l’ho esagerato. Ho messo le linee di separazione, ma ENORMI, belle spesse, colorate, invasive. Così non sarebbero state come quei timidi odiosi sottili fili che separano un’email dall’altra come a dire “nonono non guardarmi, io non sono bello, ma servo”, sarebbero diventate invece le protagoniste.
Hanno vinto, le dannatissime linee hanno vinto.
Carichi Sospesi
Come in tutti i grandi cantieri che si rispettano, ci sono dei carichi sospesi. Qui, come vedete nell’imagine di seguito, la barra di navigazione è sospesa da una gru, e il footer trasportato da un camion. Tutto sospeso, tutto in costruzione. Se prestate attenzione, in ogni pagina la barra non è mai attaccata in cima e ai lati, ma sempre un po’ sotto, per dare l’idea di essere veramente appesa a una gru.
Tipografia
Ora devo trattenermi. Da quando il mitico prof. Ciulla mi prestò Il canone Vignelli in quarta superiore, io sono fissato, innamorato perso della tipografia. Mi fa impazzire. Se potesse diventare una ragazza, io sposerei un font (a quale sposerei ci arriviamo). Qualcosa di incredibile, stratosferico, commovente, ma allo stesso tempo dal fine di utilizzo estremamente pratico e concreto. Vediamo, leggiamo scritte tutti i giorni e non pensiamo alle ore, agli anni di studio che una mente geniale ha trascorso per accostare in modo perfetto quelle forme geometriche, o di come nei secoli queste si siano strette, allargate, assottigliate, capovolte, complicate, raddrizzate. Appena avrò studiato l’argomento più approfonditamente dedicherò assolutamente un pensiero dello Zibaldone alla tipografia, per ora c’è solo un ingrediente de La Marmellata al riguardo.
Dato che sono un typography enthusiast, sin dalla prima stringa di CSS che ho scritto ero consapevole e sicuro che la scelta del font sarebbe stata cruciale, vitale, decisiva nella costruzione di xplosionmind. Il font, ovunque, è Inter. Quasi uno scherzo del destino che il font che ho scelto si chiami come una squadra di calcio, favoloso. Tutto torna.
In realtà, se io potessi, userei sempre, unicamente, incondizionatamente Helvetica. È lui, il font che sposerei. Helvetica. Però, porca puzzola, come tutte le Beatrici che si rispettino, Helvetica è una bellezza inaccessibile, e il nostro un amore impossibile. Helvetica può essere utilizzata (quando si parla di un font, si sottintende sempre la parola ‘font’, quindi tutti i font, teoricamente sono al maschile, ma lei… lei no.) solo per uso personale. È disponibile fra i font preinstallati su Mac e Windows, ma se si intende creare qualcosa sul cui design poi si metterà la firma (come questo sito, che è pubblicato con la licenza Creative Commons Share alike blabla, presente nel footer di ogni pagina) non la puoi utilizzare. Perciò, a malincuore, ho dovuto cercare un’alternativa. Per fortuna, non è stato difficile, anzi, molto facile: quello con Inter è stato un colpo di fulmine. le sue o, le sue e, aaah, le sue elle. Una magia. il papà di Inter è un designer troppo figo che si chiama Rasmus Andersson e che nel tempo libero guida macchine da corsa. Ho deciso immediatamente. Inter sarebbe stato il font di xplosionmind.
Per quanto riguarda il font serif (cioè con tutti i fronzoli: quello che uso negli articoli e nelle poesie) sarò più breve: è un font aperto, libero, sviluppato da GUST e-foundry, un team di tipografi polacchi. Mi è stato simpatico da subito, è meno aggressivo e presuntuoso di Playfair Display (che ho utilizzato sul sito precedente), ho scelto di adottarlo con leggerezza e fiducia, sono soddisfatto.
Spazio
L’interlinea è sempre 1.5em. Spero la lettura scorra facilmente e credo sia lo spazio perfetto fra una riga e l’altra.
Sto ancora valutando se modificare il kerning (lo spazio fra le lettere) o la larghezza degli spazi, per ora mi piace così. Altrimenti, ascolto con piacere vostri suggerimenti.
MAIUSCOLE
Ciò che mi ha sempre fatto impazzire di Helvetica è il suo maiuscolo. Se non passassi per un pazzo e leggere non mettesse un’agitazione assurda, scriverei sempre solo con Helvetica Maiuscola in grassetto (ogni parola di più di una lettera in stampatello non grassetto è decisamente inguardabile). Con Inter è un po’ lo stesso, perché dai, siamo sinceri, Inter e Helvetica si somigliano, un po’. Per questo, su xplosionmind tutti gli heading sono maiuscoli. Tutte le cose che sono maiuscole sono anche bold, ma non viceversa.
Scatole e nastri
In HTML, chi un po’ lo conosce lo sa, tutto sta in scatole (precisamente, “contenitori”): ogni elemento è una scatola che contiene o a sua volta è contenuto da un’altra scatola. Una pagina web, semplificando, è un insieme di scatole che stanno una dentro l’altra, tipo matrioska. Se volete fare un esperimento, cliccate CTRL + SHIFT + C se siete su Firefox o CTRL + I se siete su Chrome (sostituite CTRL con cmd su Mac) e potrete notare che ogni <div> è l’inizio di una scatola e ogni </div> è quello che la chiude. Io stavo provando a far stare i titoli delle sezioni in una propria scatola, per mettere lo sfondo solo a un rettangolino intorno alla scritta, al centro della pagina, ma non riuscivo. Sono impedito come pochi con il CSS. Alla fine, rassegnato, ho lasciato che le strisce con sfondo colorato fossero larghe quanto tutta la pagina, come le vedete ora. Ho lasciato stare per un pezzo la stilizzazione degli <h2> (i titoli a metà pagina) dedicandomi ad altro. Abituandomi a vederli, dopo un po’, ho pensato: “mica male! Direi proprio che se ci stanno tutte queste scatole in giro, anche qualche nastro starebbe bene”. Così ho lasciato ’ste cose colorate lunghissime. Sono bellissime, pure!
Non l’avrei mai detto, ma: menomale che non ero capace.
Pagine
Non immediatamente, ma dopo poco si capisce benissimo che lo Zibaldone è un blog, tutto è una specie di registro delle mie attività, che i pasticci sono delle poesie, che La Marmellata è una sorta di taccuino pubblico. La mia intenzione era quella di attribuire un’identità a ogni pagina, di darle un perché e di definire un suo carattere. Per questo, ho evitato di utilizzare titoli descrittivi, assegnando invece dei nomi. Conseguentemente, per semplificare la confusione, sotto ogni titolo c’è una breve illustrazione del contenuto della pagina e del perché di quel nome.
Lingua
È stato uno degli obiettivi più complicati da finalizzare, quindi, anche se non c’è molto di cui raccontare, lo scrivo: ogni pagina (eccetto gli articoli, che sono solo nella lingua originale) è tradotta in italiano e in inglese. Allo stesso modo header e footer. Mi sono divertito un sacco a scrivere i contenuti delle pagine perché, dovendo in ogni caso tradurre in un’altra lingua, a volte sono partito dall’inglese, a volte dall’italiano. Ergo, se state leggendo qualcosa in italiano, non è detto che sia l’originale: più probabilmente ho prima scritto quella frase in inglese e poi ne ho fatto la trasposizione in italiano.
Apertura
Il codice sorgente del sito è su GitHub, in fondo a ogni articolo è presente il link “suggerisci modifica o correzione”, che porta direttamente alla versione modificabile di quella pagina. Ovviamente, in caso apportaste modifiche, l’implementazione di queste nel codice originale non è automatica, deve essere approvata da me. Il mio obiettivo è quello di trasformare questo sito in un portale, che è una parola bruttissima per esprimere un concetto bellissimo: un luogo online per trovare risorse e leggere pensieri.
Newsletter
Nel sito precedente gestiva tutto Wix: ad ogni nuova pubblicazione, veniva inviata un’email agli iscritti. Ora, diventa tutto mooolto pù complicato. Cercando di risparmiare tecnicismi, per avviare efficacemente la newsletter devo riuscire a implementare uno script che automatizzi questi passaggi:
- aggiungere un indirizzo email digitato nel campo di iscrizione nel footer all’elenco degli iscritti alla newsletter;
- verificare un eventuale identità dell’indirizzo digitato con uno già presente in lista;
- completare, con contenuti differenti per ogni articolo, un’email con layout da me precedentemente definito;
- spedire questa nell’istante in cui effettuo una push (caricamento su GitHub di una nuova versione del sito) contenente un nuovo articolo.
Ci sono molti altri piccoli dettagli che non ho messo in elenco, come lo scenario in cui la push contenga la correzione di un articolo già esistente e non appena pubblicato. In ogni caso, credo di poter risolvere alcuni se non la maggioranza di questi problemi con Mailtrain. (con Mailchimp sarebbe probabilmente più semplice ma non ho voluto usarlo in quanto non Open Source). Mi metterò al lavoro su questo al più presto.
Cursore
Quando leggete da telefono non ve ne accorgete, ma se aprite il sito da computer potete divertirvi a giocare con il cursore. La sua modifica è uno di quei dettagli che sono semplicissimi da manipolare, ma che quasi nessuno applica.
Sono (purtroppo ero, non lo sono più come una volta) appassionato all’astronomia e a tutte le figate legate all’esplorazione spaziale. per questo, alle superiori passavo ore dei miei pomeriggi di pseudo-studio a guardare le live streaming di SpaceX (quella di Elon Musk) che mostravano il lancio delle navicelle Dragon, contenenti i rifornimenti per la ISS. Essendo senza pilota, le navicelle Dragon, una volta nell’orbita della ISS, non possono attaccarsi da sole alla stazione, ma devono essere “catturate” da un braccio robotico fighissimo chiamato Canadarm. Quando un astronauta assume il controllo del Canadarm per afferrare un Dragon, ha un’interfaccia simile a quella del mirino di un cecchino, con + al centro.
Non è la stessa cosa rispetto al compimento di una manovra a centinaia di kilometri al secondo di velocità, in assenza di gravità, con un millimetrico margine d’errore, assumendosi la responsabilità del salvataggio di un carico dal calore di centinaia di migliaia di euro, ma mi piace da matti l’idea di potersi sentire come un’astronauta nello spazio a ogni click su xplosionmind.
Fun fact
Come quando ai aggancia il bersaglio in un combattimento il mirino diventa verde, così su xplosionmind, passando sopra i link, il puntatore diventa azzurro.
Pagina agganciata, capitano!
Sono un nerd senza speranze.
Inciampi
Come ho anticipato all’inizio, programmare questo sito è stato un casino. Io non ne sapevo nulla, ora ne so poco, e ho avuto costantemente la fretta di finire tutto ma contemporaneamente anche di riuscire ad arrivare al risultato che volevo, come lo volevo. Ho perso un sacco di tempo a cercare di imparare nozioni che poi ho scelto di non sfruttare, a migliorare dettagli che poi ho dovuto eliminare, e tanti altri pasticci. Il prezzo più grande da pagare quando si tratta di informatica è il tempo. Non a caso, Dottor Strange è il mio preferito. Appena apparso nel MCU, ha spodestato Tony Stark in un attimo. Come al solito mi sto perdendo, ma per fortuna sono quasi alla conclusione.
Non sono sicuro che tutto questo tempo trascorso a creare xplosionmind sia stato efficacemente investito e che quello che ho appreso lungo il cammino mi sia veramente utile in futuro, ma so per certo che inciampare è quello che fa crescere di più. Sono contento di averlo fatto e entusiasta di continuare a farlo.
What’s next
Ne stavo per uscire pazzo: la prima cosa che farò ora è disintossicarmi dal codice. Starò per un po’ a leggere e scrivere, guardare, approfondire e scoprire come sempre, ma stando alla larga da Vim.
Appena avrò trovato un equilibrio fra umanità e tecnica, riprenderò a sviluppare i dettagli mancanti. Ciò che ho in programma di aggiungere o sistemare è qui, dove potete aprire un issue. Se avete difficoltà a leggere testo bianco su sfondo nero, ho intenzione di aggiungere un pulsante che cambia sfondo da chiaro a scuro. Se per voi leggere in questo modo è un problema, segnalatemelo, csì valuto quanta priorità dare all’implementazione di questa funzionalità.
Grazie, grazie, grazie. A tutti gli amici che mi hanno sopportato mentre ero in palla perché impazzivo a programmare il sito, a tutti i santi che hanno accettato di testarlo in anteprima e, per ultimo ma non ultimo, il mitico Claudio Faoro, che mi ha dato una mano e molti consigli sullo sviluppo.