Tre giorni dopo

Dal vecchio bagno, ora studio

Sono da tre giorni fisso sul sito e sento il bisogno di mandare un vocale a me stesso. Il mio lunedì se n’è andato dietro allo scrolling infinito della homepage. Non è ancora come voglio e ormai penso di averci capito poco. Si può fare un caricamento dinamico dei contenuti senza portarsi dietro un file json che adesso è piccolo perché sono solo cinque pagine ma che, poi, come diventerà? Non c’è cosa peggiore del Ctrl+Z a fine giornata perché è un incubo per l’umore.

Meglio martedì, molto meglio: il focus corretto nei risultati di ricerca, la bozza delle nuove icone, altro che non ricordo ma che, alla fine, ha funzionato. E poi oggi, fino a pochi minuti fa, della pulizia e le gesture per passare da una pagina all’altra con uno swipe verso destra o sinistra. Il tutto con quel fenomenale goto() di SvelteKit che sa tanto di C64.

index.svelte
function swipeAction(event) {
		direction = event.detail.direction;
		if (direction === 'left' && next) {
			goto(`${next.slug}`);
		} else if (direction === 'right' && previous) {
			goto(`${previous.slug}`);
		}
	}

Adesso sul quaderno ho segnato due priorità: aggiungere una pagina chiamata idee con dei checkbox e un aspetto da changelog; e capire se le notifiche push sulla PWA sono alla mia portata. La pagina c’entra poco con l’idea del sito libro ma sarebbe diverte da fare e poi, alla fine, pressappoco, no? Meglio non pensarci e ascoltare il vocale binaurale pieno di rumori, di riverbero, di attesa per i MacBook e di accordi aperti col capotasto. Ricordarsi, la prossima volta, di accordarla quella chitarra.

6

Metti, le onde

Porto Santo Stefano (GR)

Metti, le onde: se ti fermi sugli scogli e aspetti, te le prendi dritte in faccia; se scappi quando arrivano, ti inseguono e ti schizzano alle spalle; se le guardi dall’alto, ti sembrano grosse; se ti metti un po’ in disparte, ti danno noia col loro suono inquieto. Se invece cerchi il momento giusto e poi ti tuffi - finisce che ti muovi con loro e non le senti quasi più. E guardi gli scogli e pensi che scemo che sei stato a prenderti le onde in faccia quando bastava tuffarsi e diventare, anche te, un’onda.

5

Questa tastiera piacerà (build)

Scrivo in piedi, con un iPad Pro

Giornata veloce. In un attimo è passato il pomeriggio e per fortuna questa mattina ho risentito della gara dell’altro ieri altrimenti avrei corso 18 km anziché 12 e mi sarei stancato ancor di più. Il tempo mi è volato soprattutto dopo pranzo, dopo la camminata. Mi son messo a montare i keycaps alla tastiera cinese e in un colpo è arrivato il momento del tè e dello spuntino; pensavo fossero le tre, ma erano le cinque.

Al di là di qualche cosetta da smaltire, proprio quelle due o tre faccende che mi fanno capire di non essere ancora del tutto libero e “a regime”, come ho scritto nella newsletter inviata stamani, il grosso delle attenzioni è andato ad una tastiera economica da assemblare. Assemblare e non costruire perché è fatta per essere messa insieme da tutti, come un Lego.

La tastiera si chiama Gamakay LK67, ed è il clone di un modello (anche lui cinese) chiamato TOM680. Questo clone cinese della tastiera cinese costa solo 59 euro ed è decente, niente da dire. Ha tutto quello che un utente inesperto cerca in una meccanica. Tipo:

  • Costa poco - anche se mancano switch e keycaps.
  • Ha le luci RGB personalizzabili.
  • Ha le luci RGB sul fondo e sui lati del telaio.
  • Ha i connettori hot-swap per switch senza saldatura.
  • Ha Bluetooth 5.0, wireless 2.4 e USB-C.
  • Ha una batteria da 2400 mAh.
  • Ha una manopola per la regolazione del volume.
  • Ha un layout 65%, con il PAD direzionale dedicato.

E ora che l’ho prima smontata per migliorarla un po’, e poi rimontata con switch Gateron Yellow, i damperini sugli stabs, una manopola in alluminio al posto del triste esemplare in plastica, la spugna nel telaio, e i keycaps cloni dei GMK Dots ma comunque in PBT spesso, posso scrivere che è un modello da considerare. Io ho speso: 59 + 51 + 18 euro per tastiera, keycaps e switch, quindi 128 euro. Niente dogana perché è arrivato tutto, in estate, dai magazzini europei. Con poco più avrei potuto prendere una Leopold, ma sarebbe stata una tastiera diversa, solo cablata, non illuminata, più banale (e dio mi perdoni per aver chiamato banale una Leopold).

Aggiornamento del giorno dopo: ecco il video. Dura 34 minuti quindi non devo aggiungere dettagli. Il negozio italiano per le Varmilo è keyboardexpress.tech.

Nel video che uscirà dopodomani (o forse domani sera?) si potrà vedere tutta la procedura. Sarà una cosa lunga, sui 30 minuti almeno; sarà binaurale perché ho registrato con i microfoni adatti; sarà divertente perché sono partito con l’idea di assemblare tutto alla svelta per poi prenderci gusto, smontare il PCB, aggiungere degli smorzatori, lubrificare gli stabilizzatori, rompere il selettore wireless/wired, e poi sbagliare a rovesciare con noncuranza i keycaps dots perdendo i riferimenti sulle altezze dei singoli tasti. Adesso la ho sulla scrivania, pronta ma non ancora collegata; e se la usassi per inviare il commit di questa pagina?

Altro aggiornamento del giorno dopo: per il commit no, ma la ho sotto le dita da tutto il giorno ed è gustosa come pensavo. Devo alzare l’angolo (pensavo di inserire un supporto in legno anziché mettere dei piedini) e installare qualche Lavender in più. Con un tappetino sotto, suona come una Leopold (anche meglio sugli stabs). Il tutto incrementa la necessità di costruire una build seria.

4

Come ho fatto questo sito

Roma (RM)

Passare le giornate a non pensare ad altro se non al codice, a come si fa questo, a come si fa quello. Dalla mattina mentre correvo alla sera mentre passeggiavo in paese con un qualche tutorial in cuffia, davanti al MacBook Pro 13 M1, col quale ho fatto tutto per tre settimane - e dal quale scrivo ancora adesso - ho guardato decine di video, letto documentazione, chiesto aiuto su Reddit, e scritto messaggi a chi condivide il codice su GitHub.

Tutto è stato fatto a mano, non ho usato template o starterkit. Volevo qualcosa di essenziale, volevo costruire i mobili come Wittgenstein. Ho re-inventato la ruota diverse volte e ho riscritto il codice man mano che capivo. E ho faticato ad accettare dei compromessi. Il sito non è finito perché ho iniziato a studiare soltanto adesso. Ho registrato un video per spiegare meglio la struttura del sito e motivare certe scelte di design ma, attenzione: non sono uno sviluppatore, posso sbagliarmi, quindi prendete quello che segue come il parere di uno smanettone.

Tra il mettere in piedi dei siti statici con Hugo e il portare avanti un’idea poco chiara ce ne passa, fidatevi. Ti trovi davanti alla tua ignoranza. Sai cosa vuoi fare ma non hai idea di come farlo. Non sai come si chiamano le cose, non conosci le sintassi e perdi ore su delle graffe messe male. Ma è stato uno spasso e la conferma che tutto il mio modo di fare, quello che negli anni ho chiamato “approccio”, è solo una questione di design e di usabilità. È la ricerca di una stabilità e di un mondo che funziona senza se e senza ma. Mi piace. Ci sguazzo. E ora non voglio andare altrove.

Quali software

Pressappoco è fatto con SvelteKit e TailwindCSS. Tra i plugin npm ci sono Howler per gli effetti audio e per il player dei vocali, e MDSvex per le pagine in markdown evoluto. Le poche immagini presenti vengono convertite in .webp da vite-imagetools. Sembrano tante aggiunte ma sono solo comodi pezzetti. Ecco un estratto del package.json attuale.

package.json
"devDependencies": {
  "@sveltejs/adapter-static": "^1.0.0-next.18",
  "@tailwindcss/aspect-ratio": "^0.2.1",
  "@tailwindcss/typography": "^0.4.1",
  "html-minifier": "^4.0.0",
  "mdsvex": "^0.9.8",
  "rehype-external-links": "^1.0.0",
  "svelte-lazy": "^1.0.12",
  "svelte-sitemap": "^2.1.1",
  "tailwindcss": "^2.2.4",
  "vite-imagetools": "^3.6.8",
  "howler": "^2.2.3"
}

Il sito è statico, almeno al momento (nota: La home cambierà quando riuscirò a domare <svelte:component> per un effetto infinite loading. ) , quindi generato con adapter-static di SvelteKit in file HTML, CSS e JS. Ed è una PWA quindi si può installare sullo smartphone o sul PC sia per la navigazione offline sia per il caching dei file essenziali al primo caricamento. Gira su Netlify. Non ha cookie interni, né un sistema di tracciamento esterno delle visite perché il calcolo viene fatto sul server con Netlify Analytics. I campioni sonori sono presi da FreeSound. Il codice verrà migliorato (spero!) e cambiato spesso perché mi sono rimaste in ballo due o tre cosette. Tipo.

  • L’infinite scroll in homepage: l’implementazione che son riuscito a far funzionare (con un fetch dinamico del json, o con il caricamento della “pagina successiva” via JS) non mi piace così ho pensato di lasciar perdere, studiare ancora, e ritornarci.
  • Le notifiche in modalità PWA. Qui si va un po’ oltre, ma mi piacerebbe allinearlo al comportamento di una app nativa, avvertire chi legge di una nuova pagina online, ecc ecc.
  • Il codice della modale con ricerca annessa è un caos, e lo stesso vale per il player audio basato su Howler. Devo spezzettarlo in componenti e capire se ha davvero senso usare quel player JS anziché integrare l’iframe di Spotify - e aggiungere un cookie, dannazione.

E non vi dico ancora, perché poi il lavoro da fare spaventa anche me, delle animazioni che vorrei inserire sul logo (con Svelte si lavora sui tracciati svg alla… svelta) e dei componenti che vorrei inserire nelle singole pagine quando sarà necessario, che poi è il motivo per cui ho scelto di usare .svx anziché gli .md testuali. Anche questo è spiegato meglio nel video. Per ultimo, devo rivedere l’indice. Sarebbe utile avere un’anteprima della pagina cliccando sul link, un po’ come la navigazione su Kindle o Kobo, ma non sono riuscito a trovare uno schema che funzioni anche su smartphone. Forse si potrebbe semplicemente scrollare a destra e sinistra per andare avanti e indietro? oppure aprire una modale.

Risorse utili

Svelte richiede delle conoscenze di Javascript, HTML e CSS almeno basilari. Bisogna sapere usare quei due o tre comandi di Node JS e bisogna avere un’idea di cosa si cerca di fare. Non è un framework con pezzi pronti da assemblare, ma è un modo per avere del codice finale leggero - e per fare alla svelta le operazioni più comuni. Non c’è un DOM virtuale. Tutto è basato sui componenti. Si scrivono nel suo codice (HTML, CSS, JS) e lui compila in Vanilla Javascript, tutto qua. Ma bisogna essere consapevoli di cosa occorre e poi controllare se Svelte può rendere lo sviluppo più veloce.

Attenzione: SvelteKit è ancora in beta e tanto potrebbe cambiare con la versione 1.0. Chi non ha basi di programmazione web dovrebbe partire da un corso sulla solita triade. Con un corso non si perde tempo, si impara un metodo, si apre il cervello. Su Javascript non vi so aiutare perché c’è troppa roba in rete ecc ecc. Ma su Svelte vi consiglio questi quattro:

  1. I corsi di LevelUpTuts.
  2. La playlist YouTube di Codevolution.
  3. Il tutorial ufficiale di Svelte.dev.
  4. Il canale Youtube di Lihautan.

Poi iscrivetevi alla subdir su Reddit e spulciate il canale Discord, leggete la loro newsletter perché fa sempre dei resoconti su cosa è uscito, guardate come gli altri fanno le loro cose, cercate tutorial su Google e, insomma, datevi da fare. Se state pensando di studiare React o di usare Gatsby o Vue, valutate anche Svelte. E, soprattutto, se pensate che vi serva del tempo per provare, per scavare nella vostra passione, per fare quello che vi va di fare, e nel mentre fermare tutto il resto come ho fatto io, fatelo. Un mese, tre mesi, sei mesi di studio: pensate di meritarli?

3

Primi errori

Dal balcone di casa mia

Sono arrivate segnalazioni di problemini, e suggerimenti sui possibili miglioramenti, e incoraggiamenti. Grazie. Tra ieri e oggi ho corretto qualcosa nel codice del sito, e adesso scrivo questi appunti mentre sono sulla questione più noiosa. Ma andiamo con ordine:

  • Nella ricerca, le frecce della tastiera adesso tornano al campo di input e non sono vincolate alla selezione dei risultati. Provate subito e approfittate della pagina 2 online!
  • L’animazione di rotazione del player audio è adesso più lenta, è di 2 secondi per giro; la vecchia da un secondo poteva dar fastidio, scusate.
  • In PWA, su Android, ho corretto il “Page Not Found” del tasto back. Il manifest.json rimandava ad una index.html adesso inesistente. Non so se l’aggiornamento avviene in automatico ma re-installatela e via.
  • Il logo del footer non copre più la pagina indice quando si naviga da uno smartphone con risoluzione ridotta; in quella pagina, il logo aveva il position: fixed, una cattiva idea.

Ora state scrivendo per altre cosette (tipo la dark mode nella pagina di errore, il redirect di pressapoco.it con una p sola che non funziona con https - sistemo tutto, sistemo tutto), compreso il problema del player audio viola che non interrompe la traccia quando si esce dalla pagina. Se faccio partire il vocale e poi navigo altrove continuo a sentire il flusso e posso addirittura sovrapporlo ad un altro, in loop (nota: Aggiornamento: ho messo online il nuovo player. Cambia il design e corregge i bug. Bene così. ). Come spiegherò nel video di domani vorrei evitare un player audio esterno perché vorrei evitare cookie. Il sito non ha cookie e così deve restare.

Per ultimo: il podcast è stato approvato da Spotify e da Apple Podcast quindi presto sarà anche là. Google Podcast, sia mai il contrario, richiede più tempo.

2

Introduzione

Roma (RM)

Ecco il sito ed ecco me, finalmente liberato dall’urgenza di metterlo online. Ho intenzione di scrivere ogni giorno su pressappoco (minuscolo), o forse anche più volte al giorno, su cosa studio, leggo, provo, vedo; non sento, perché per quello ci saranno gli audio binaurali, e nemmeno quello che voglio farvi vedere, perché arriveranno dei video. Nella mia versione più euforica, pressappoco è il sito per tutto, il raccoglitore. Mesi fa, mentre lavoravo al netbook rosso, lo usai per prendere degli appunti; ho appena controllato il commit sul repo di GitHub: era il 26 ottobre 2020. Eccoli.

Il nome dovrebbe dire tutto. Non ho un’idea finale, non so come potrebbe reggere la noia quotidiana ma nella mia proiezione più dopata lo vedo al posto di tutto. Pressappoco sarà un diario dove scrivere di volta in volta, di giorno in giorno, senza troppo editing, quello che passa da qui, quello che sui social verrebbe solo inglobato.

Quindi pressappoco è un diario giornaliero pubblicato pezzo pezzo. Un insieme di messaggi vocali e di podcast (anche il podcast si chiama così). Un sito generico, per i libri e per la mia tecnologia, e un potenziale portale per tutto quel che faccio. Oppure solo un blog, un blog alla vecchia maniera. Una pratica divertente sarà scrivere quello che è successo, qualsiasi cosa sia, nelle 24 ore. Quindi la mattina cosa ho fatto? E nel pomeriggio? Esempio: stamani ho provato la CPU del notebook taldeitali e quindi ne parlo, senza aspettare la recensione finale - che non ci sarà. E se passo tre ore a cercare in rete di una cosa che ho letto, perché non incollare quegli appunti in una pagina?

Non ho fretta e non ho aspettative. Di sicuro, ad oggi, scrivere il suo codice è stata la parte migliore. Più dello scegliere il Roboto Condensed, le icone (che cambieranno), e più del primo npm run build. La ricerca che si apre con CTRL+K e i risultati da scegliere con la tastiera, il fetch ai file .svx nel modo più discreto possibile e poi il capire come prendere la pagina precedente e la successiva e filtrare il tutto con quel isPublished nel frontmatter del markdown. Ho intenzione di pubblicare dei video screencast sulle parti più importanti del codice, di spiegare le decisioni di design, e a momenti sarà online una pagina dedicata - credo la numero 2 - a tutto questo spasso.

Un diario di cedevolezza?

D’accordo, un diario. Ma perché “di cedevolezza”? È semplice. L’ho intuito e poi trascritto solo a fine agosto, di ritorno dal mare. Purtroppo non ho segnato l’origine del ragionamento, accidenti a me.

Perché questo nome? Parte dalla sensazione di benessere dopo l’attività fisica, dall’ottimismo dopo il nuoto, dai ragionamenti positivi e fantasiosi sul mettere online una cosa che hai in testa e farla arrivare agli altri, anche passando un po’ per scemo, seguendo l’entusiasmo… e poi la realtà, sempre più brutta se vai un po’ a fondo (trovarti a casa a fare le cose che pensavi di fare e non avere voglia, spunto, energie concentrate). Da qui il bisogno di cedevolezza, perché questa negatività dipende dal voler approfondire anziché lasciare in sospeso, anziché prenderla per quel che è.

La mia ricerca è restare leggero, riconoscere e gustare ogni ottimismo, e poi aggrapparmi a quello stato ingenuo, euforico e sognante. Perché dovrei uscirne? Per andare dove? Quindi pressappoco, tutto pressappoco (un po’ alla nevermind, non importa, lascia fare) con l’obiettivo del miglioramento della voce interiore per una narrazione di qualità più alta, più nobile, più evoluta, più intelligente.

È un ragionamento che regge. Ma ho predicato bene per poi agire male. Ho pubblicato 220 commit prima di svelare il nome del sito. Ho ottimizzato tutto per filo e per segno prima di aprirlo. Ho aspettato i loghi finali (un lavoro di Michele Morisco - grazie ancora). Ho distribuito il podcast ovunque. Altro che digital garden e altro che pressappoco. Avrei dovuto discutere di questo a metà agosto e mi ci trovo ora, a fine settembre. Ero consapevole di questi errori ma non sono riuscito a lasciarli andare, a cedere. Ne ho di strada da fare. Ma intanto togliamo l’àncora e vediamo come va.

1