I want a script that expands the threads of a Twitter post, in the form of a tree, because it's much easier to read this way, you don't have to click, expand, go back, all on separate subpages....
Bene, #Firefox mi sta facendo più o meno scimunire per bene per quanto riguarda il supporto alle #webapp progressive (su #mobile dico, su desktop non ci pensate nemmeno, Mozilla è capa tosta). Ho perso veramente le ultime ore a capire perché cavolo Chromium accetta di buon grado anche il più scarno dei #manifest, permettendo senza fatica di raggiungere l’obiettivo di una pagina web che ha la sua finestra dedicata che sembra nativa… mentre sulla volpe un sito si installa bene, un altro si installa ma manca l’icona, un altro ancora non si installa e quindi magari ha l’icona perfetta però si apre come scheda del #browser. 🥴️
Ovviamente, anche #Mozilla Developer Network manca di #informazioni soddisfacenti a riguardo: certamente potrei in teoria esagerare e implementare tutti i #metadati possibili, ma visto che viviamo nel mondo reale devo chiedermi qual è il minimo sindacale. Dopo qualche #test, non ho alcuna risposta definitiva, ma almeno delle linee guida generali di cosa mettere nel manifest si:
name, display: in teoria sono obbligatori, ma francamente anche se non lo fossero sarebbero da mettere ugualmente, quindi non ho manco provato senza; il nome della app serve, così come serve specificare se vuoi che vada a schermo intero o lasci almeno la UI del sistema operativo (e/o quella del browser, a cui io dico no grazie)
start_url, scope: non so se per solo uno dei due parametri o entrambi ma, se non si impostano correttamente, magari la #app si installa pure e funziona ugualmente (in loro assenza, da standard il browser dovrebbe usare l’URL corrente per le sue considerazioni), ma ho notato che su Firefox può succedere che l’icona non viene visualizzata; anche questi, quindi, è bene metterli
icons: questo è un array di oggetti che è ancora più #complicato, ma per farla breve, serve almeno un’icona che sia in formato PNG per far rilevare la pagina come #PWA, e nello specifico ne serve una che sia abbastanza grande (128×128 è il minimo credo? almeno sul mio dispositivo, in realtà non so se su altri cambia, però Chromium fa in ogni caso meno capricci) per avere una scorciatoia di lancio che abbia effettivamente un’icona, e non la prima lettera del nome; i parametri sizes e purpose rendono tutto ancora più incasinato, se si ha 1 sola icona si fa prima a settare entrambi come "any" (però intanto il type sembra si possa omettere)
Perché mi interessa tutto questo? Perché non solo dovrei sistemare le mie #applicazioni, che appunto non si installano tutte come dovrebbero (e per alcune dovrei anche implementare i Service Workers per farle andare offline, ma quella è un’altra storia), ma perché fin troppe app #web programmate da altri non hanno proprio la decenza di supportare un minimo lo #standard, essendo pensate come #siti vecchio stile, e quindi non le si riesce ad usare in maniera soddisfacente su mobile. Volevo fare un mio browser nativo (wrapper dell’Android System Webview banalmente) ai tempi come soluzione, però non solo credo rimarrà nel limbo per sempre, ma non potrei mai implementare tutte le cose che mi sono utili in navigatori completi come Firefox e di cui giornalmente giovo, quindi è chiaro che la soluzione vera è semplicemente apparare quest’ultimo. ⛏️
Questa #idea mi è venuta circa stamattina senza alcun trigger particolare (ormai le mie migliori sono sempre così), e ho provato a cercare “un modo per forzare qualunque sito come PWA su #Android”, cosa che avevo già fatto tempo fa senza arrivare a nulla, e ho quantomeno trovato un #userscript, questo qui. Ha però un sacco di problemi (tra cui quelli che mi sono scimunita per levigare un attimino), quindi tant’è che ho fatto il mio ora con lo stesso meccanismo: https://greasyfork.org/en/scripts/490784-pwas-anywhere. In pratica genera al volo un manifest e lo inietta in qualunque pagina se questa non include già un suo, così da farlo rilevare al browser. Testato su vari siti e, nonostante i punti ancora da sistemare, è meglio avere lui che non avere nulla; però tra tutti quelli su cui ancora non funziona, ci sono i sitarelli di Google, mannaggia (più tanti altri ancora non provati)… dovrò aggiustare, e qualche metodo lo ho già in testa. 😳️
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. 🤓️
Solution for #YouTube's predatory 5 sec delay on #Firefox is one #userscript away! 😂 Or just tell people #Google uses discriminating techniques and so your peers should get away from this dumpster fire to somewhat bearable alternatives as soon as possible.
There may be better ways to do this but it seems to work fine. Let me know if I messed something up... 😅
Added Universeodon and Mastodon dot Social for now but easy to add more. #MastodonBirdUI#Universeodon#FirefoxAndroid
A couple of weeks ago, @shazbot made this post about a project that they were working on. Since then, @shazbot, @ori, @minnieo and I have been hard at work, and we are excited to finally announce the official release of kbin Enhancement Suite (KES)!...
Time for a new feature update for KUP. This time I'm introducing bookmarking functionality which adds a new bookmark menu to the toolbar where you can save articles for later....
Just in time for what is likely another wave of the Reddit migration, I made a userscript to hide posts with Reddit-related keywords and posts from magazines with Reddit in the name from your feed....
I've seen people wishing for an easier way to block magazines without having to go to the magazine page. Checked around and haven't found any scripts that do that, so I hacked together one with the help of chatGPT...
Recently, especially with feddit.de, there are a lot of posts in languages that are not English. This is great for adoption!, but unfortunately I have no idea what the posts are about because I don't speak German. I couldn't find a setting to hide posts in other languages either!...
This userscript adds a checkbox to the sidebar that lets you turn magazine stylesheets on and off. It also remembers if you have a magazine's stylesheet disabled, so when you come back to it later, it'll still be turned off (or back on!)...
After seeing this comment by @daredevil, and the reply by @dellyphy, I was inspired to create a userscript that adds keyboard shortcuts to make using kbin a bit easier....
I want a script that expands the threads of a Twitter post, in the form of a tree, because it's much easier to read this way, you don't have to click, expand, go back, all on separate subpages.
I want a script that expands the threads of a Twitter post, in the form of a tree, because it's much easier to read this way, you don't have to click, expand, go back, all on separate subpages....
kbin Enhancement Suite: a community-curated script manager that lets you customize your kbin experience
A couple of weeks ago, @shazbot made this post about a project that they were working on. Since then, @shazbot, @ori, @minnieo and I have been hard at work, and we are excited to finally announce the official release of kbin Enhancement Suite (KES)!...
OC Kbin Usability Pack 0.4.5 - Bookmarks (greasyfork.org)
Time for a new feature update for KUP. This time I'm introducing bookmarking functionality which adds a new bookmark menu to the toolbar where you can save articles for later....
Kbin Notifications Panel (greasyfork.org)
Userscript that adds a notification panel to the navigation bar.
OC [Userscript] Enough about Reddit already
Just in time for what is likely another wave of the Reddit migration, I made a userscript to hide posts with Reddit-related keywords and posts from magazines with Reddit in the name from your feed....
[Userscript] kbin ez block
I've seen people wishing for an easier way to block magazines without having to go to the magazine page. Checked around and haven't found any scripts that do that, so I hacked together one with the help of chatGPT...
Kbin Darker Dark Mode (userstyles.world)
Hey everyone,...
OC Don't speak German? Here's a userscript for you
Recently, especially with feddit.de, there are a lot of posts in languages that are not English. This is great for adoption!, but unfortunately I have no idea what the posts are about because I don't speak German. I couldn't find a setting to hide posts in other languages either!...
OC Improved Collapsible Comments - Script that lets you collapse replies by clicking a line to the side of each comment
Download it from greasyfork...
OC kbin Magazine Style Toggle - Lets you enable and disable per-magazine stylesheets (greasyfork.org)
This userscript adds a checkbox to the sidebar that lets you turn magazine stylesheets on and off. It also remembers if you have a magazine's stylesheet disabled, so when you come back to it later, it'll still be turned off (or back on!)...
OC kbin Linked Comment Enhancer - Highlight comments that you open links to and scrolls to prevent them from being hidden (greasyfork.org)
This script highlights comments when you open a link to them, and scrolls to the comment to make sure it doesn't get hidden....
Userscript for filtering posts by language on kbin (greasyfork.org)
I've created a userscript that hides posts based on the language set in the badge....
OC I created a userscript that adds keyboard shortcuts for formatting comments - shortcuts for navigating and interacting with stuff are planned (greasyfork.org)
After seeing this comment by @daredevil, and the reply by @dellyphy, I was inspired to create a userscript that adds keyboard shortcuts to make using kbin a bit easier....