0
Mag 31 2018

Compara e unisci PDF

I PDF sono dei file molto comodi da leggere, ma possono diventare un inferno da modificare.

Avendo preso l’abitudine di prenderci appunti direttamente sopra, per me diventa un bel problema quando un documento viene aggiornato, così ho deciso di fare un’applicazione web che consenta di compararli visivamente e unirli.

È ancora un po’ un proof of concept. In pratica si basa sul noto PDF.js di Mozilla: lo usa per renderizzare le varie pagine in due canvas affiancati.

La navigazione è basata tutta su JavaScript vanilla, o meglio, su ES6, quindi con i browser moderni funziona, quindi, pur non avendo provato, sono sicuro che non vada su Internet Explorer.

Quindi questo progetto mi ha permesso di mettermi alla prova con JS, per vedere se riesco ancora a fare qualcosa senza jQuery, e mi ha dato modo di imparare un po’ a usare le API HTML5 per il Drag&Drop con i file.

Invece per il drag&drop dell’elenco di pagine che verranno unite mi sono affidato alla libreria html5sortable, che però non ha altre dipendenze. Avevo cominciato a implementare anche quello, però i risultati non erano buoni e la difficoltà parecchia. Quindi per questa cosa ha avuto senso usare una libreria, che peraltro non pesa molto.

Infine, per il lato client, ho usato Bootstrap 4, giusto per dare un po’ di classe al tutto.

Per il lato server ho usato una Servlet Java: pur non piacendomi molto come tecnologia, ha il vantaggio di poter chiamare direttamente l’ottima libreria iText, che è veramente potente e versatile.

L’unico svantaggio è la viralità della sua licenza: Afferro GPL. Mi vedo quindi costretto a rilasciare il lato server sotto questa licenza, invece il lato client, da solo, per quanto mi riguarda, se la Afferro lo concede, lo potete considerare sotto licenza MIT (non sono sicuro sia possibile, però).

Per il momento è ancora allo stato embrionale, soprattutto il codice lato server, quindi per motivazioni di sicurezza non ne faccio il deploy sul mio VPS, però vi lascio volentieri il codice per il download :-) .

0
Dic 19 2011

jQuery 1.7: callbacks

Mi sono appena accorto che in jQuery 1.7 è stato aggiunto un primordiale supporto per gli hook, basato sulle classi.

Molto bello!

In pratica si usa con l’oggetto window.jQuery.callbacks() o, più velocemente, $.callbacks();.

Una volta assegnato quest’oggetto a una variabile potete aggiungere e rimuovere funzioni, mentre per chiamarlo fate variabile.fire(); sostituendo a variabile il nome della variabile a cui avete assegnato $.callbacks().

Uno dei probabili errori è pensare che una volta settati siano globali o che facendo $.callbacks() rimangano salvati globalmente, invece no, perciò state attenti.

0
Ago 17 2011

WebSocket

Grazie al changelog di Firefox 6 (uscito oggi) ho scoperto questa funzionalità di Javascript, che ovviamente, come tutte le più belle funzionalità, saranno in HTML 5, ma intanto i browser si stanno preparando.

La funzionalità di cui voglio parlare è la “websocket”.

Generalmente, quando si parla di socket in informatica si parla di una connessione tra un server e un client. Anche i normali protocolli che siamo abituati a usare utilizzano delle socket: per esempio quando si visita una pagina web, si apre una socket con un server, ma questa connessione viene subito chiusa dopo che il server ha inviato il contenuto della pagina.

In una web-socket invece la connessione rimane aperta, in attesa che una delle due parti la chiuda, e intanto si possono inviare dati.

Una delle applicazioni che potrebbero sfruttare questa caratteristica è senza dubbio la chat.

Si potrebbe mettere il server in ascolto di nuovi messaggi che poi sono inviati subito al client, anziché sfruttare continue richieste AJAX.

Un giorno magari potrei provare a fare dei test con una chat “ibrida”: le websocket saranno preferite, ma in caso il browser non le supporti, si va di AJAX.

6
Lug 16 2011

Notifiche Destkop di Chromium

Che dire… Chromium su certe cose è proprio avanti, specialmente se si parla di javascript, da sempre punto molto curato nel suo sviluppo.

Non era la prima volta che sentivo parlare delle “Notifiche Desktop” però oggi ho voluto provarle e, che dire?

Sono proprio una bellissima idea.

Ormai la chat si è spostata nel web e si sta parlando di spostare anche la video chat, ci sono applicazioni nel web che sostituiscono praticamente ogni programma.

Uno degli svantaggi che è capitato spesso anche a me però accade quando si usa qualche programma diverso dal browser: non sempre ci si può accorgere di cambiamenti vari (nuove email, nuovi messaggi) che invece avverrebbero con i programmi tradizionali.

Chrome risolve questo problema con le Notifiche Desktop: però non funzionano solo su Gmail, bensì ogni sito le può sfruttare.

Basta un po’ di javascript. Questo articolo spiega molto bene come fare e propone anche una demo.

Come idea la considero ottima, però la concorrenza si deve mettere alla pari: non mi dispiacerebbe poterne usufruire anche con Firefox.

Invece con Internet Explorer 9 ci sono i Pinned Sites che supportano delle API interessanti.

2
Lug 06 2011

Come fare un menu “espandibile”

C’è un mio amico che si diletta a creare siti web e poi visto che io sono più esperto di lui mi chiede spesso cosa ne penso.

L’altro giorno ha aggiunto al suo sito un menu che con javascript apriva e chiudeva i sottomenu.

Quando mi ha chiesto: “Cosa ne pensi?” gli ho risposto “Una schifezza. Di grafica è anche bello però è anti accessibile…”.

È vero che ormai tutti i browser hanno javascript sempre abilitato, però c’è chi javascript non ce l’ha ed è molto più intransigente dei normali utenti: i motori di ricerca.

Visto che spesso mi fa delle sfide ho deciso di far vedere come creerei io un menu con questo articolo.

Userò un po’ di HTML, la proprità display di CSS e Javascript, precisamente il DOM e l’evento onclick.

La struttura HTML è molto semplice, anche se deve essere per forza fatta così: ogni menu è una lista ul e i sottomenu hanno un elemento span che fa da loro titolo.

È necessario che l’ul principale abbia un id, il resto viene estrapolato col DOM. Perciò si possono fare infiniti sotto menu.

Ecco un HTML di esempio:

[Leggi il resto...]