#FramesBrowser

framiovelocitore

Oggi avrei dovuto fare altro (…almeno, così sento, ma non saprei proprio dire che cosa di altro), e invece ho continuato a sistemare i guai combinati ieri su #FramesBrowser… Poco importa però, visto che, indipendentemente da cosa faccio, una costante resta tale: nessuno mi paga. 👁️

Una delle cose proprio brutte che avevo causato è il caricamento lentissimo della #webapp, perché caricavo le dipendenze (una sola, in quel momento) in un modo brutto: i file JavaScript di libreria erano codificati in stringhe JSON, messi a loro volta in file JavaScript, tutto ficcato nell’HTML passato agli iFrame come URL data:, che al caricamento fa eval(), ed ecco che la magia di serie B si avvera. 🤪

Il fatto è che, in questo modo, avevo URL lunghi 200 KB o più (!), cosa a quanto pare inconcepibile anche per il browser, che non solo rallenta, ma… nel mentre che stavo facendo altri esperimenti stamattina (aka, questo problema non c’è in produzione, non sparatemi), ha anche preso di continuo a crashare, perché l’uso di RAM saliva in quei momenti a picchi di svariati GB (non è dato sapere il perché, però, e nemmeno il perché il picco sia doppio). Un sacco di tempo perso stamattina, coi riavvii tra browser e intero PC… 🤕

…Perché non caricare direttamente tutto con <script src="...">? Perché, mentre non ci sono problemi a caricare una risorsa così da http: o https: all’interno di un contesto data:, ci sono eccome se la risorsa è su file: (caccole cross-origin)… e io voglio che la app continui a funzionare senza un webserver, dal filesystem locale, oltre che deployata sul sito. Quindi… ho fatto che l’iFrame carica invece un file HTML wrapper, e il codice dentro quello visualizza i contenuti HTML effettivi (presi dall’URL hash) piazzandoli nel nuovo DOM. 🤯

Ho pure sistemato la UI su mobile, che ora non è più tagliata in basso per via del chrome del #browser, e il dialogo modale del Canvas di screenshot, che ora ha persino testo e tasti. Poi c’è ancora qualche altra cosina che posso sistemare, ma nulla che stia guidando me insana, quindi probabilmente per stasera chiudo, e di aggiornare ancora ‘sto coso se ne parlerà nei prossimi 6 mesi… unless… 😈

Direi che infine si fa usare non male. Ricordiamo: 2 giornatine di lavoro solo per fare screenshot con dimensioni replicabili, certe volte non so se sono furbyssyma. (E su mobile non appare ‘sto cazzo de menu contestuale.) C’è però una parte di me che, guardando la finestra ridimensionabile che lascia spazio vuoto, dice “scusa ma perché non implementi finestre simultanee con tiling?”… a cui rispondo che è perché va risistemato mezzo codice, e stasera, a quest’ora, non è cosa.

Questo forse è uno dei miei progetti meno utili, ma allo stesso tempo uno dei più fighi, mi sa. Anche solo con questo riuscii a sperimentare dettagli della piattaforma web che forse sarebbe meglio ignorare e non fare pazzie del genere… bene così. Il browser dentro il browser ha questo #gusto proprio indescrivibile… peccato solo che la me del passato ha arronzato la lista delle schede, e ora me attuale (io) non c’è voglia di renderla meno spartana. 🥱

#browser #FramesBrowser #gusto #webapp

Qualcuno avrebbe sperato niente post stavolta? E invece no; semplicemente, c’era di mezzo la programmatio. Mi trovo così ancora una volta (altre volte in cui è successo, è successo, ma non ho scritto qui…) ad aggiornare #FramesBrowser, #webapp che manco a farlo apposta tocco precisamente ogni 6 mesi. Lavoro raro!!! 🤫️

Stavolta il problema era: devo catturare screenshot di certe pagine #web, per inviarli a parti (tradotto: i post che pubblico su Pixelfed, per fare lo spam bene, coff coff), ma… Se non le facessi ogni volta precise (voglio la larghezza uguale al letterale pixel) starei male dentro; peccato che, per fare ciò, devo impazzire col ridimensionare la finestra del browser precisimamentissimamente, su desktop. 🙄️

Risolverei facendo direttamente da mobile? Forse si, dato che lo schermo del telefono non si allarga o restringe da un giorno all’altro, però è palloso… e non ci ho comunque pensato prima di scriverlo adesso. Quindi, è molto meglio spendere delle ore per aggiungere al mio programma il ridimensionamento (a occhio e a numero) degli iFrame mostrati, e conseguentemente il tastino per fare #screenshot degli stessi. 😩️

Ovviamente, nella sua estrema saggezza, il Web non offre API per fare schermate di parti del DOM, ma, per fortuna conoscevo una libreria chiamata html2canvas, che usa della palese magia nera per aggirare questa mancanza. È figa, fa non so come il rendering “a mano” di tutte le cose, e le piazza appunto in un elemento Canvas, che invece i #browser permettono direttamente di trasformare in immagine raster. 🤓️

Nella mia estrema fortuna però, questa libreria non gestisce autonomamente gli #iFrame, quindi via ad implementare codice per iniettarla ed azionaria! Lo farei proprio tutti i giorni!!! 🥰️ (Estremamente divertente soprattutto la parte dove non posso iniettare codice arbitrario dentro la pagina caricata da un dominio, quindi la app si deve a mano scaricare l’HTML per patcharlo e caricarlo come data URL ed è un casino che non funzionerà mai col 100% dei siti mamma mia aiuto.)

Altre magagne? Avoja! Innanzitutto, o gli faccio in qualche modo caricare tutte le immagini della pagina con CORS (che vuol dire, in qualche modo, forzare l’uso del proxy in un punto di codice non mio), o altrimenti il #Canvas risulta tainted, e non può essere scaricato in automatico con .toDataURL()… ma non è la fine del mondo, perché posso banalmente piazzarlo a schermo, e a quel punto c’è sempre il menu contestuale del browser per salvare un PNG. E… grande cacca: con questa dipendenza da 200KB, non solo tutta la app è più lenta a caricare, ma anche le pagine nei frame (per via di tutta la codifica URL che #mannaggia). 🦧️

Bene o male, però, già funziona; posso usufruire! Ne ho approfittato anche per aggiungere un tasto in più, per richiamare il dialogo di stampa del browser (per PDF e carta), che tanto ormai l’inject #JavaScript è fatto… Dai, che se non sapevate io avessi anche questo tra la mia immondizia, sarebbe giunta proprio l’ora di provarlo, con questi aggiornamenti, su su: https://hub.octt.eu.org/FramesBrowser/.

https://octospacc.altervista.org/2024/09/14/framionavigator-per-le-fotonze/

#browser #Canvas #FramesBrowser #iFrame #JavaScript #Mannaggia #screenshot #web #webapp

Schermata di un frame che mostra example.com ridimensionato nella app, e l'immagine screenshot scaricata aperta fuori dalla app.

Client Info

Server: https://mastodon.social
Version: 2025.07
Repository: https://github.com/cyevgeniy/lmst