Informazioni su questo sito🔗

(Clicca qui per informazioni su di me)

Questo sito vuole essere uno spazio digitale fuori dai social media in cui stare, e buona parte del piacere che ne traggo viene proprio dal costruirlo e mantenerlo. Ricevo anche molte domande su come faccio certe cose, quindi su questa pagina cercherò di documentare come è fatto il sito e le domande più frequenti. Se c'è qualcosa che vorresti sapere, o che non ho affrontato, scrivimi pure.

Indice🔗

Design e filosofia del sito🔗

Il modo in cui ho dato priorità alle mie decisioni lavorando su questo sito è stato più o meno questo:

  1. Divertirsi
  2. Facilità di manutenzione
  3. Esperienza utente

Quanto ciascuna di queste cose pesi sul risultato finale dipende da quale aspetto del sito stiamo parlando.

Design visivo/UX🔗

Quando mi sono messo a progettare il sito, ho passato parecchio tempo lontano dal progetto vero e proprio, limitandomi ad annotare le idee che mi venivano in mente. Ruotavano tutte attorno alla domanda a cosa mi serve davvero tutto questo? Credo che se ci si mette a costruire qualcosa senza aver riflettuto seriamente su questa domanda, si finisce inevitabilmente con qualcosa che somiglia a un bel sito portfolio. E così diventa difficile capire dove mettere le informazioni che in un portfolio non ci stanno.

L'uso del colore si è evoluto man mano. Per esempio, ho sfondi scuri semplicemente perché fissare uno schermo luminoso troppo a lungo mi faceva male agli occhi, e ci sono molti colori diversi sparsi nel testo (forse troppi?) perché annoia guardare un colore solo quando si scrivono contenuti per lunghi periodi. In sostanza volevo ravvivare un po' le cose, e forse è stato il continuo passare dal sito all'anteprima all'editor di codice a mettermi in testa quell'idea.

Quanto alla tipografia credo di avere ancora molta strada da fare, e il mio uso degli spazi bianchi non è stato granché ispirato. Onestamente non ho idea di cosa sto facendo, e spero solo di non dover cambiare troppe cose quando avrò un'idea più chiara di come andrebbero fatte.

L'ultima cosa è che ho iniziato a disegnare di più e mi sono accorto che le illustrazioni mi piacciono davvero. Puoi vederne un esempio sulla mia homepage. Parte di ciò che mi diverte è il processo di problem solving che il lavoro di illustrazione porta con sé. È straordinario in uno di quei modi per cui puoi dedicarci tutto il tempo che vuoi per migliorare sempre di più, oppure fermarti a abbastanza buono. C'è qualcosa di elegante in questo tipo di lavoro non binario.

In ogni caso, sto cercando di inserire più illustrazione e più lavoro di design nel sito, per dargli un aspetto curato e professionale, mantenendolo però esteticamente amichevole e divertente. Spero che chi arriva sul mio sito si senta ispirato ed entusiasta di andare a fare le proprie cose, a partire da qualcosa che ha visto qui.

Più avanti in questa pagina trovi un elenco di siti web che hanno ispirato il design di questo sito.

Tecnologie utilizzate e architettura del sito🔗

L'html è generato con il generatore di siti statici Zola, il CSS è fatto al 99,9% con le classi di utilità di Tailwind CSS, e il sito è ospitato su Cloudflare Pages. Una piccola parte delle funzionalità è realizzata anche con i Cloudflare Workers.

Noterai anche che non c'è nessun Javascript, a eccezione di poche cose inserite da Cloudflare.

Zola non ha un sistema di plugin, mentre Tailwind ha bisogno di leggere il tuo html prima di poter produrre il CSS, per via del tree shaking e delle più recenti funzionalità JIT che offre. Quindi, per farli funzionare insieme, eseguo il comando di build standalone di Tailwind dopo quello di Zola, mettendo il css risultante nella cartella di output di Zola (di solito public/). Ha funzionato sorprendentemente bene e non ho avuto problemi. Anche se per comodità uso uno script di build npm personalizzato, i miei comandi di build/run sono più o meno i seguenti:

zola build && npx tailwindcss   \
--input <IN> --output <OUT>

zola serve --interface 0.0.0.0  \
& npx tailwindcss               \
--input <IN> --output <OUT>     \
--watch <WATCH_1> <WATCH_2>     \
<...> <WATCH_N>

Di solito tengo sotto osservazione il mio file tailwind.css principale, oltre alle cartelle content e template.

Nota: --interface 0.0.0.0 serve per poter testare il sito sul mio computer con il mio vero dispositivo mobile.

Header HTTP🔗

Ecco una copia del mio file degli header, per chi fosse interessato. Sentiti libero di commentare o di propormi dei suggerimenti.

  # HTTP Headers file (Note: https://developers.cloudflare.com/pages/platform/headers)

# Ask to deny search engine indexing for not "production" deployments
https://:project.pages.dev/*
  X-Robots-Tag: noindex

/*
  Strict-Transport-Security: max-age=31536000; includeSubDomains
  Content-Security-Policy: default-src 'none'; script-src 'self' 'wasm-unsafe-eval' static.cloudflareinsights.com ajax.cloudflare.com; style-src 'self' 'unsafe-inline'; style-src-attr 'self' 'unsafe-inline'; img-src 'self'; font-src 'self'; connect-src 'self' cloudflareinsights.com; prefetch-src 'self'; child-src 'none'; frame-src 'self'  https://stories.spenc.es; worker-src 'self'; frame-ancestors 'self' https://stories.spenc.es; form-action 'self'; base-uri 'self'; manifest-src 'self'; object-src 'none';
  X-Frame-Options: SAMEORIGIN
  X-Content-Type-Options: nosniff
  Referrer-Policy: no-referrer-when-downgrade
  Permissions-Policy: accelerometer=(), ambient-light-sensor=(), autoplay=(), battery=(), camera=(), cross-origin-isolated=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), midi=(), navigation-override=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(), xr-spatial-tracking=(), clipboard-read=(), clipboard-write=(), gamepad=(), speaker-selection=(), conversion-measurement=(), focus-without-user-activation=(), hid=(), idle-detection=(), serial=(), sync-script=(), trust-token-redemption=(), vertical-scroll=(),
  Feature-Policy: default 'none'
  X-XSS-Protection: 1; mode=block

/pgp/spencer-scorcelletti-public.asc
  Content-Type: application/pgp-keys

/atom.xml
  Content-Type: application/atom+xml

/*/atom.xml
  Content-Type: application/atom+xml

Ho usato Observatory di Mozilla per aiutarmi a individuare i problemi e cercare di stringere le maglie il più possibile.

Testare su mobile dal mio computer🔗

È importante fare i test su un dispositivo mobile vero. Per questo eseguo squidman sul portatile e poi configuro un proxy nelle impostazioni di rete del telefono.

Per esempio:

  1. Avvio squidman e prendo nota della porta di squidman e dell'IP del portatile
  2. Configuro il proxy sul telefono, usando l'IP del portatile e la porta di squidman del passaggio precedente
  3. Vado sul sito usando l'IP del portatile e la porta su cui gira il mio server

Risorse🔗

Ecco una raccolta di risorse che ho trovato utili. Fammi sapere se ce ne sono altre che dovrei includere.

Ispirazione e ringraziamenti🔗

Tengo un elenco di cose che mi hanno ispirato mentre continuo a lavorare al mio sito. Ogni voce ha qualcosa di diverso da offrire. Alcune hanno un elemento estetico che mi ha ispirato, altre organizzano le informazioni in un modo che funzionava ma che andava oltre quello che si vede di solito in un template. Altre ancora sono semplicemente strampalate e bizzarre. Proverò a spostare quell'elenco