sitoctt/Pages/Devlogs.md

// % Title = 💾 Devlogs // % HTMLTitle = 💾 Devlogs // % Style = @import "[staticoso:Site:RelativeRoot]Assets/Pages/Devlogs.css"; // % Index = True // % Order = 35 // % Categories = Tecnologia // $ Checkboxes =

💾 Devlogs

Per mesi, in maniera occasionale, ho (ab)usato il PicoBlog come se fosse un devlog.
Ad un certo punto (era quasi ora..) ho però pensato al fatto che le cose non andassero bene.

La scrittura sul PicoBlog è, per natura dello stesso, molto limitata in lunghezza e in scopo. Per tenere una buona traccia di tutto quello che sviluppo - tra cui questo sito, ma non solo - urgeva la creazione di una sezione si stile diario, ma dedicata alla cosa.

Quindi, si dia inizio ai miei Devlogs!
Ovviamente, scriverò soltanto la roba interessante, non tutto quello che faccio in ogni minimo dettaglio - i bug si dimenticano una volta che si risolvono.

Leggi i Devlogs

#### [2022-09-05] Filtri intelligenti

-> #sitoctt

Le soluzioni semplici sono spesso le migliori.
Con questa filosofia, come in altri casi, ho preso e ho implementato questa piccola cosa che mi serviva sul sitoctt.

Al momento i Devlogs sono ancora un po' vuoti, ma, per quando inizieranno a riempirsi di più, sarebbe carino poter efficacemente filtrare le mie scritture per categoria.
Problema risolto in appena qualche riga di HTML e CSS!

<input type="checkbox" id="CheckBox-CATEGORIA" checked>
<label for="CheckBox-CATEGORIA">#CATEGORIA</label>
...

.Box-CATEGORIA,
...
{
	Display: None;
}

/*
*/ #CheckBox-CATEGORIA:Checked ~ Div > .Box-CATEGORIA,
...
{
	Display: Inherit;
}

Mi basta questo codice di base - che devo però duplicare per ogni singola categoria - per definire degli elementi (che dovranno avere una o più classi di categoria, e io uso <details>) che possono essere fatti sparire quando si toglie la spunta alle eventuali caselle.
Diversi elementi possono inoltre appartenere a multiple categorie, cosa che per me è utile.

La cosa è molto più complicata a spiegarsi, di quanto non lo sia a farsi e ad essere usata.. quindi... 😳!

Nota: I simboli hash (#) nei nomi visibili delle categorie non centrano nulla con l'id HTML degli elementi, li uso come prefisso semplicemente per simboleggiare un hashtag.

#### [2022-09-01] Ottimizzazioni necessarie

-> #staticoso

Nei giorni appena passati ho apportato qualche miglioria interna a staticoso.

La prima cosa che ho fatto è stata aggiungere il supporto alla compilazione differenziale dei siti, ossia: ad ogni esecuzione, il programma ricompila solo le pagine che sono effettivamente cambiate dalla compilazione precedente, arrivando quindi ad una maggiore efficienza.

La funzione è ancora da perfezionare, in quanto non controlla se l'HTML di template cambia, ma solo se lo fanno i file di pagine e post.
La cosa può risultare in confusione durante l'uso: eventuali utenti che usano il software (me in primis) magari modificano un template, non vedono le differenze dopo una ricompilazione, e apriti cielo. Per questo motivo, per il momento la funzionalità non è attiva di default; chi vuole usarla deve attivare una flag.

Oltre a ciò, la build differenziale va ancora a calcolare alcune cose che non cambiano, quindi non siamo ancora alla massima efficienza; per arrivarci, dovrò implementare una cache per alcune di quelle cose che servono solo durante l'esecuzione, in modo che il programma possa ripescarle dall'archiviazione locale.

La compilazione differenziale può arrivare a far risparmiare tantissimo tempo, reale oltre che di CPU, ma si può fare di più per guadagnare fino all'ultimo millisecondo della prima categoria: usare il multithreading.
Con il multithreading - anche questo implementato parzialmente nei giorni passati - il programma può usare tutti i processori (fisici e logici) allo stesso tempo, anziché uno solo, dividendo quindi il tempo reale necessario al completamento di tutti i calcoli. Viene da sé che, più processori si hanno, più è possibile dividere il tempo.

Il mio sito, con 30 pagine Markdown (ho escluso l'unica in Pug, che richiede una chiamata ad un programma esterno, apposta per testare) che in totale ad oggi pesano ~180 KB, appena qualche giorno fa impiegava attorno ai 2200 millisecondi per compilarsi sul mio PC desktop¹. Con le nuove ottimizzazioni, invece.. si parla di ~850 ms per una compilazione pulita, e ~450 ms per una differenziale senza alcuna modifica da ricompilare. Non male!

Giusto per, ho voluto fare un test - che, se avessi voluto fare davvero per bene, avrei dovuto fare in confronto ad altri generatori di siti statici - su un ipotetico sito da 1500 pagine. Ho quindi copiato la cartella del mio sito, sdoppiato tutte le pagine per farle arrivare alla grossa cifra (in peso dei file avrò avuto un totale di 9 MB, considerando (180/30)*1500), e ho acceso il programmino.
Esecuzioni diverse hanno dato risultati un po' diversi, forse perché avevo diversi altri programmi aperti che mangiavano CPU (primo di tutti, Firefox che riproduceva un video da Invidious; almeno il 20% di CPU era occupato); ma posso dire di aver visto ~160 s per una build pulita e ~17 s per la differenziale (di nuovo, senza alcuna effettiva modifica).

Quei 17 secondi in particolare, comunque, mostrano senza alcun dubbio che il mio codice va ancora ottimizzato - oltre il poco che ho già fatto. Vabbè, in ogni caso mi soddisfa già il punto in cui sono arrivata!

#### [2022-08-29] Titoli delle sezioni, ma ancora meglio

-> #staticoso #sitoctt

Soprattutto a causa della necessità di rendere staticoso leggermente più adatto alla creazione di siti di documentazione, oltre che di blog e cose così, ho sentito di dover apportare qualche miglioramento alla generazione dei ✨magici✨ titoli delle sezioni.

Ispirandomi parzialmente a cosa fa mdBook{[:MdTgtBlank:]}, ho aggiunto un target ancora (<a>) al fianco di ogni heading nel testo.
mdBook rende ogni titolo un link in sé; soluzione elegante ed intuitiva per copiare un link alla sezione all'istante, ma che può dare (da) problemi grossi in certi casi. Ad esempio, le sezioni <details>, che io tanto amo, diventerebbero difficili da aprire, perché gran parte della loro hitbox sarebbe coperta da quella di un link.
Dovevo inventarmi qualcos'altro.

A livello di HTML, allora, staticoso genera per ogni titolo la seguente struttura: elemento heading, che contiene prima un elemento span racchiudente l'ancora, a sua volta contenente il semplice testo », e poi un altro span (con id univoco) che ha il titolo in sé.
Facendo un esempio pratico, questo è cosa esce fuori:

<h1 class="SectionHeading">
	<span class="SectionLink">
		<a href="#-Titolo-di-esempio">
			<span>»</span>
		</a>
	</span>
	<span class="SectionTitle" id="-Titolo-di-esempio">
		Titolo di esempio
	</span>
</h1>

Senza CSS, i titoli sulla pagina renderizzata si vedono come al solito, eccetto per il fatto che hanno un carattere » cliccabile alla loro sinistra. Andrebbe bene già così, ma ovviamente io avevo la personalizzazione in mente da subito.
Sul tema principale del sitoctt, infatti, ho personalizzato la cosa in modo da avere:

• L'emoji della catena (🔗) come carattere per il link;
• Il posizionamento un po' a sinistra del tastino, per far rimanere i titoli in linea con il testo normale;
• Opacità del carattere molto ridotta, e un po' meno ridotta quando il mouse/dito ci passa sopra;
• Evidenziazione e sottolineatura di un heading attivato.

In codice CSS, la mia visione si è tradotta in queste righe:

.SectionTitle:Target {
	Color: #EEDDFF !Important;
	Background: #700070 !Important;
	Text-Decoration: Underline;
}
.SectionLink {
	Position: Absolute;
	Left: -1.5em;
	Opacity: 0.08;
}
.SectionLink:Hover {
	Opacity: 0.8;
}
.SectionLink > A::Before {
	Content: '🔗';
}
.SectionLink > A > Span {
	Font-Size: 0;
}

In tutta onestà, lo ripeto: forse per il sitoctt questa cosa non serviva; ma, per la documentazione di staticoso{[:MdTgtBlank:]}, credo sarà utilissima.

#### [2022-08-24] Titoli delle sezioni - ora ovunque

-> #sitoctt

Una delle caratteristiche delle pagine di questo sito, anche quelle di blog - cosa che, riconosco, non si vede tutti i giorni, se non su Wikipedia (che un blog non è) - è il menu con i titoli delle sezioni della pagina.
Su pagine con tanto e tanto contenuto è qualcosa di ottimo, perché permette a chi legge di saltare rapidamente tra diverse zone del testo, per poter trovare al volo determinate informazioni.

Il mio generatore di siti statici genera i menu con i titoli guardando (appunto, direi) i titoli (heading), presenti nel testo, quindi: se quelli non ci sono, il menu non si riempie.

Ecco, io non so per quale assurdo motivo, ma fino ad ora ho tenuto senza titoli magici alcune pagine (in particolare, quella del PicoBlog) che hanno contenuti divisi in sezioni collassabili.

È vero che, grazie ai collassabili (creati con il grazioso tag <details>), queste pagine sono facilmente scorrevoli, visto che a tutti gli effetti le stesse diventano un menu... ma, senza i titoli fatti per bene, è impossibile linkare a sezioni specifiche!
Eh già, perché l'injecting dell'attributo id da parte di staticoso va, giustamente, a braccetto con la ricerca degli heading.

Un po' con il trova e sostituisci del mio editor di testo, e un po' a manina, ho fatto questa sistemazione nelle 2 pagine in cui dovevo. Ora, anche per quelle, ho la possibilità di creare dei link di rimando alle sezioni che voglio.

#### [2022-08-24] La data di compilazione

-> #staticoso #sitoctt

È una cosina semplice, quella che ho fatto ieri (e che solo oggi ho tempo di scrivere), ma può secondo me avere grandi implicazioni: ho aggiunto a staticoso la possibilità di scrivere nell'HTML il momento (data e ora) in cui il programma ha compilato ogni pagina, che posso sfruttare aggiungendo la macro \[staticoso:BuildTime] dove preferisco.

Ritengo sia qualcosa di utile almeno per il sitoctt: mi fa più che piacere che il sito possa venire archiviato e distribuito parallelamente ai miei server - se non fosse stato così, non avrei scelto con tale convinzione la licenza CC BY-SA - però potrebbero sorgere problemi in caso venissero fatti circolare backup obsoleti che non mettono in chiaro di esserlo.

Nel tempo, il sito inevitabilmente subisce modifiche. Alcune sono semplici aggiunte, e in quei casi un archivio obsoleto del sito avrà banalmente cose in meno; altre volte, si tratta di rettifiche.
Data la possibilità di quest'ultimo tipo di aggiornamenti, è bene che chi legga una copia del sito possa eventualmente accorgersi del fatto che la stessa sia vecchia (ad esempio, di una settimana o più, considerando la frequenza con cui di solito aggiorno il sito).

Revisioni ai miei vecchi contenuti possono avvenire per diversi fattori: magari ritengo giusto aggiornarli perché non più in linea con qualche verità oggettiva, oppure con le mie opinioni personali.
Non che le versioni precedenti debbano per forza sparire - la cronologia di Git sta bene dove sta - ma il punto è che le edizioni antiche del sitocto devono specificarlo bene, per evitare di indurre una qualsiasi persona in confusione.

E quindi, alla fine, ecco che ora ho la data di compilazione al piè di ogni pagina.
O almeno, così è al momento in cui scrivo. Non è mica da escludere che lo stile del mio sito possa cambiare prima o poi, e con esso anche il posizionamento della mia bella riga di testo! 😬️

[:HNotesRefsHTML:]

---

1. In data 2022-09-01, il mio PC fisso è: CPU AMD Ryzen 3 3200G{[:MdTgtBlank:]}; OS Void GNU+Linux{[:MdTgtBlank:]} x86_64, libc musl. ↩︎