L’ultimissimo miglioramento che ho in ogni caso poi fatto ad #MBViewer è stato l’aggiunta di una funzione per importare codice #CSS e #JavaScript, per modificare come i post possono essere visualizzati. Entrambi funzionano allo stesso modo, con i relativi parametri URL che accettano sia #URL esterni che data URI. Niente di particolare per gli stili, semplicemente importo nella pagina la qualunque cosa venga data lì, ma per gli #userscripts è stato leggermente più #complicato. 😕️
Il punto sta nel voler evitare che #script essenzialmente non affidabili siano iniettati nel contesto della pagina semplicemente da URL, perché potrebbero fare tante cosine cattive; prima fra tutte, rubare #dati dall’archiviazione del #browser del mio dominio, cosa che è un #problema, perché gli utenti inesperti che aprono la app da #link non andranno a cercare di investigare cosa accade dietro le quinte (e, molto probabilmente, non lo farei realisticamente nemmeno io, seguendo la logica del “i miei siti sono miei e li conosco, sui siti altrui ho le protezioni del browser attive“). E quindi inizio a scendere in un rabbithole… ☠️
#Iframe? Hmm… non so, non è il caso, sarebbero insicuri, ci sono alcuni modi in cui una pagina in frame può fare robe fastidiose. Non può essere assolutamente un’idea, proprio mai (foreshadowing). 🪟️
Trovo un bel po’ di #librerie vecchie che ricompilano codice #JS per rimuovere pericoli, o lo analizzano preventivamente per la presenza di operazioni dannose così che possa non essere mai eseguito… praticamente tutte abbandonate, qualcuna esplicitamente dichiarata insicura e non patchata, e per qualcun’altra lo possiamo dare per scontato. 🐛️
Forse questa libreria più recente, jailed, che sfrutta un iframe assieme ad un Web Worker per creare una sandbox forte e bloccare tutte le #API eccetto alcune che si decidono… No, l’ho provata e non va bene, non si riescono a passare alla sandbox oggetti complessi, tra cui i costruttori, è impossibile far funzionare API tipo quella del DOM. 🚧️
Sarebbe stata un’idea usare qualche reimplementazione del #DOM per NodeJS tramite browserify, tipo Cheerio, ma farla anche solo girare lì dentro è un altro casino allucinante. 🥴️
WASM tecnicamente è una #sandbox a sua volta, e non accede alle API del browser se non con codice colla, quindi magari… teoricamente ok, ma nella pratica non ho trovato nessuna soluzione già bella e pronta che potessi usare per questo specifico scopo. 🕳️
La #pazzia: PyScript… sarebbe quasi già pronto, ma avrei dovuto comunque modificarlo per bloccare tutte le API insicure (rimuovere #codice), e poi richiede 15+ MB di dipendenze di runtime… non ideale. 🗿️
Alla fine ci ho pensato meglio, e sono arrivata alla conclusione che è abbastanza sicuro far girare gli script in un iframe con proprietà src="data:[...]" e sandbox="allow-scripts" (che significa, “blocca tutte le proprietà sensibili eccetto gli script”)… voglio dire, nel visualizzare il contenuto dei siti, già permetto eventuali iframe provenienti dai post, e quelli teoricamente possono già fare quello che vogliono eccetto accedere ai dati della finestra root. Nella pratica, i programmini degli utenti quindi hanno accesso a (quasi) l’intera API JavaScript senza poter fare cose bruttissime. 🎉️
https://octospacc.altervista.org/wp-content/uploads/2024/02/image.pngEcco un esempio di tutto, alla fine: questo URL carica il mio MicroBlog, importa un foglio di #stile che mette questo font buffo, e uno script che colora le parole dei #messaggi in base a come si ripetono man mano (inutile, ma serve giusto per dare idea delle potenzialità)… <a href="https://hub.octt.eu.org/MBViewer/#/siteUrl=https://octospacc.altervista.org|platform=wordpress.org|includeStyle=data:text/css;utf8,@import%20url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap');.MbPost{font-family:'Single%20Day',cursive;}|includeScript=data:text/javascript;utf8,function%20MbViewerFunction(data){const%20dom=new%20DOMParser().parseFromString(data.html,'text/html').body;const%20tokens=dom.textContent.split('%20');const%20words={};for(const%20i%20in%20tokens){const%20word%20=%20tokens[i];if(words[word])words[word]++;else%20words[word]=1;tokens[i]=%60%3Cspan%20style='color:${atob('Iw==')}${[0,'b58900','cb4b16','dc322f','d33682','6c71c4','268bd2','2aa198','859900'][words[word]]};'%3E${word}%3C/span%3E%60}data.html=tokens.join('%20').replaceAll('nn','%3Cbr%3E');for(const%20img%20of%20dom.querySelectorAll('img'))data.html+=img.outerHTML;MbViewerReturn(data)}">https://hub.octt.eu.org/MBViewer/#/siteUrl=https://octospacc.altervista.org|platform=wordpress.org|includeStyle=[...]|includeScript=[...]</a> (il link con tutta quella roba messa inline è una stringa di quasi 1 KB!). Userò tutta la cosa per rendere gli hashtag nel testo meno intrusivi per il mio sito anche lì, oltre che sul dominio originale. 👋️Finisco con dati ancora più tecnici, per chi non ha una vita: con questo #design, ogni #userscript deve provvedere ad esporre una funzione che, tramite la Channel Messaging API, viene richiamata dalla #app per ogni messaggio appena questo viene aggiunto al documento visibile; questa funzione riceve dati utili (per ora, solo l’HTML del contenuto; oltre a dati come l’id del messaggio nel flusso, che non sono granché utili all’utente ma devono essere restituiti alla app) e può rimandare nuovi dati indietro richiamando una funzione che è invece l’applicazione ad esporre allo script. Tutto questo ambaradan permetterebbe agli script di effettuare anche operazioni asincrone, comunque, non per forza di dover agire immediatamente alla chiamata. 🤓️
Tra i giorni passati fino a ieri, ho fatto delle robine #sperimentali su #MBViewer, era questo che dovevo #scrivere… La prima è stata, più che altro perché mi serviva effettivamente da tempo una piccola #app in grado di fare questa cosa, implementare la lettura del formato di esportazione chat in #JSON di #Telegram. Infatti, le #conversazioni da lì possono essere esportate anche in JSON per usi di manipolazione dati futuri, oltre che HTML per consultazione immediata; però, appunto non c’è ufficialmente un modo per leggere una #chat esportata in quel #formato macchina, e la conversione in HTML statico dopo sarebbe facile ma bruttina: avere un lettore con un’interfaccia a bolle classica so già che può tornarmi utile, perché ho qualche dump non-HTML da parte. 📦️
A parte la #scocciatura per interpretare la struttura #dati del testo di Telegram e trasporla in #HTML corretto, non è stato complesso… eccetto che c’è un #problema. Il sistema funziona, ma il #programma tende a soffocare male con dump di troppi #messaggi. Dopo poche migliaia, già subentrano #rogne, con l’uso di RAM della scheda del #browser che arriva a più di 1 GB, e il caricamento, se riesce a finire senza che tutto crashi, è veramente lentissimo. Potrei in teoria risolvere la cosa, ma è veramente una #pazzia, dovrei portare ancora di più la codebase all’assurdo per fargli caricare elementi DOM a mano a mano da una struttura che di base è comunque un singolo file tutto in memoria, perché così è il formato… per ora lascio tutto così, purtroppo nessuno mi paga, quindi nessuno godrà al 100%. 😈️
Non sono passati nemmeno 10 giorni da quando avevo detto “aaa è improbabile che aggiornerò ancora #MBViewer, dovrei provare a far iniziare a funzionare il progetto definitivo #alternativo migliore…” 🥴️
Però poi mi sono resa conto che: magari del #progetto alternativo non è semplice progettare tutta l’interfaccia e il suo funzionamento (cosa che va fatta, essendo una cosa da #costruire da zero), ma certamente non si posso comunque granché se prima non preparo dei #componenti logici che so già che mi dovranno servire… e allora, tanto vale iniziare a lavorare per quelli, integrandoli nella #app che (per quanto #spaghetti) è già esistente e funzionante, e acchiappare un bel 2 in 1 (espandere quel #programmino, e nel mentre accumulare codice che mi servirà per quel molto altro più tardi). 📦️
La prima cosa un po’ intricata che serve è il supporto all’ingestione di dati da #piattaforme diverse, con #schemi diversi. L’idea è di avere un solo #schema di dati che la app usa per lavorare internamente, per evitare di avere spaghetti, ma questo vuol dire che bisogna fare qualche tipo di conversione. Ci sarebbero diversi approcci: 🔪️
Il più classico sarebbe quello di scrivere (come degli schiavi indiani) delle #procedure di codice per tradurre ogni tipo di entità #API dai #formati esterni a quello interno, e viceversa… il che non solo è una pazzia, e richiede un botto di #lavoro (va scritto un numero di #funzioni complesse pari alle piattaforme da supportare, moltiplicato per 2), ma finisce per dare #rogne: appena decidiamo che lo schema di API interno va modificato o allargato, ecco che bisogna modificare in ognuna di quelle parti, ed ecco che magari escono nuovi errori e problemi. Ehhh, no, non ci sto dentro. 😩️
La mia idea, invece, è di usare un #documento di #trasformazione, almeno per quando le task sono semplicemente selezione e riassegnazione di chiavi di #dati (per operazioni più complesse, il codice è più appropriato del #markup). Era questo che avevo già provato a fare mesi fa (e funzionava eh!), ma, riguardandolo ora, mi stavo rendendo conto che lo strano #formato JSON da me inventato ha dei #limiti abbastanza forti, tra cui penso sia un casino tremendo usare 1 solo documento di #traduzione per fare sia avanti che indietro. Quindi, ho iniziato a ripensarlo da capo, ma ho pensato abbastanza in fretta che, beh… #JSON non va bene per sta roba, lo si vede anche dal come devo mettermi a scrivere chiavi tipo “__robo__“; JSON abuse, doing I am. Però l’idea credo sia bona… 😋️
E allora, fortunatamente sono tornata sana giusto in tempo, prima di #impazzire ancora una volta dopo mesi con Jason; almeno, abbastanza sana per capire che è meglio impazzire con #XML, se proprio proprio, in questo caso. E, boh, ci ho perso 1 giornata e qualcosa (soprattutto l’altra sera in cui, mezza drogata di sonno, mezza cringiata per colpa della situazione, ho iniziato ad andare un pochino mentale), ma bene o male l’ho fatto funzionare un minimo. C’è stato di tutto in mezzo ovviamente; tra cui, il #godere per aver sistemato un #bug, eccetto scoprire poco dopo che, no, nulla era sistemato… e averci dovuto perdere un’altra mezza giornata. 📆️
https://octospacc.altervista.org/wp-content/uploads/2024/01/image-9-960x451.pngIn #screenshot, i documenti di trasformazione: a sinistra, quello XML nuovissimo, credo definitivo; al centro, quello JSON vecchio: a destra, quello JSON nuovo che ho sperimentato per pochi quarti d’ora. 💎️Questa è una di quelle cose capaci di stupirmi anche se fatte da me: la sola #idea di poter raggiungere il 90% di quello scopo intricato semplicemente #componendo un documento XML in maniera adeguata, e avere vita facile per ogni #modifica, la trovo #pazza in concetto. Comunque, ho dovuto (iniziare a) scrivere una mega-funzione totalmente #originale per questa cosa perché, come già avevo constatato mesi fa, ma riconfermato appunto ieri, tutte le #librerie in giro per fare trasformazioni di dati così sono troppo generiche, a quel punto usare quelle sarebbe anche peggio che fare tutto in #codice. E credo di aver cercato fin troppo in giro. E, ahimè, prima o poi soffrirò di nuovo, perché dovrò scrivere pure la #funzione di traduzione inversa! 😵💫️
Che centra con la #applicazione mezza kangata? In pratica, avendo integrato questo #sistema già da ora, MBViewer può visualizzare (alcuni) #feed#RSS, e (con qualche problema, per ora) #profili#Mastodon, il che non è male. È male, invece, il mio aver scoperto solo ora che su Firefox avviene un problema con il parsing dei feed RSS, che dovrò sistemare… ma su #Chromium funziona tutto. Oh well. Ohhh, it’s so well. I #glitch non finiscono mai, la tortura della #programmazione è eterna!!! 😭️
Dunque, quel bellissimo #MBViewer, che ho iniziato a realizzare appena 3 giorni fa… è già #SpaghettiCode. Ehh, si, quel codice di #Telegram lì non è proprio fatto per gestire un caricamento di dati troppo avanzato e tutto #ClientSide: nel suo normale caso d’uso riceve #HTML già preparato dal server, ed usa #JavaScript non #moderno, quindi tentare il #retrofitting che ho fatto io è chiaro porti a difficoltà. Si può fare, perché nella #programmazione si può fare tutto, ma è un #casino. …E un po’ me lo aspettavo, e lo sapevo da quando ho iniziato. 😁️
Considerate, questa #idea mi era venuta per un motivo molto #semplice: era da un po’ che volevo implementare una vista più #minimale e con #comodità moderne (come lo scorrimento infinito, o la vista in contesto) per il #MicroBlog nuovo, ma tenendo comunque io il controllo dei miei #dati. Farlo dentro #WordPress non mi va, dato che alla fine comunque dovrei usare #script#JS, e a questo punto ho ritenuto #intrigante l’idea di fare proprio una cosa a parte, che potesse potenzialmente essere facilmente adattata per prendere i #contenuti anche da altre fonti (e lo fa, legge #JSON da ovunque, se opportunamente assemblato), qualora il #sito Altervista dovesse avere dei problemi. 🧭️
Però, questa non è la mia #soluzione a lungo termine. Per quello, in realtà, ho in mente un #progetto semi-segreto che iniziai mesi fa, ma che poi, presa da altre cose, non continuai. Doveva essere una #webapp per il Fediverso e, potenzialmente qualunque altro #protocollo#social grazie ad un layer di astrazione di #API interno. È Il#software che vorrei far funzionare con una doppia #interfaccia, a #messaggi o a “piazza” (stile Miiverse), e quindi in secondo luogo anche come #client Matrix, e in terzo e quarto per #blog e #feed standard… problema è che, dovendo non solo #progettare tutto il #frontend, ma anche svecchiare una spaventosa porzione del #codice, non è affatto una cosa rapida arrivare ad uno stato di primissimo #MVP. 😳️
Insomma, è per questo che questa piccola #applicazione, tirata su alla bene e meglio e che esiste in buona parte per via di #lavoro non mio, l’ho chiamata “#distrazione”. Continuerò ad aggiornarla, anche dopo che ora ho aggiunto l’ultima funzione fondamentale, ossia l’apertura di #post specifici? Probabilmente no, sarebbe meglio pensare a sistemare quell’altro progetto e fare un robo fatto bene. Importa qualcosa? Naaaah… come si dice, “the first rule of gun safety is to have fun“? Vale la stessa cosa per il #coding, quando l’arma è la propria tastiera insomma. Basta sia stato #divertente. 😈️
Potevo probabilmente sgraffignare codice #frontend di altro tipo per lo stesso scopo (anche se con una #UI un po’ diversa, ad esempio di vari #software del Fediverso), ma ho preferito questo di #Telegram perché non usa framework astrusi come React, solo #jQuery e quindi a farci #hacking si fa subito subito. ⚒️