Table accordion, un plugin per Bootstrap

La libreria Bootstrap fornisce una solida base per la creazione dell’interfaccia di siti e applicazioni web.
Tra le varie animazioni disponibili si trova l’effetto accordion, cioè l’apertura e chiusura “a fisarmonica” di più box di contenuto variabile.

Ho pensato di utilizzare lo stesso effetto per visualizzare all’interno di una tabella contenuti informativi aggiuntivi collegati ad una singola riga.
Quando si vuole mantentere leggera una tabella mostrando solo poche colonne, ma allo stesso tempo visualizzare a richiesta più informazioni, è possibile utilizzare il plugin che ho creato appositamente per questo scopo, che consente di caricare quando necessario, tramite AJAX, dati aggiuntivi riguardo una riga, passando come parametro un identificativo per consentire al backend di riconoscere il record.

Ho scritto un plugin compatibile con l’ultima versione di Bootstrap (4.x) e jQuery (dalla 1.10.x) e richiede pochissima configurazione.
Dispone anche di una cache per memorizzare temporaneamente i dati ed evitare più chiamate con gli stessi parametri.
Approfondisci

Creare una piantina per la prenotazione di posti con Javascript e SVG

In seguito al mio precedente articolo di qualche tempo fa su come creare una piantina con la libreria Processing.js ho pensato di aggiornarmi sulle nuove tecnologie disponibili.
La mia attenzione è caduta sull’interazione tra Javascript e le immagini SVG.

Lo standard SVG (Scalable Vector Graphics) è una tecnologia in grado di visualizzare oggetti di grafica vettoriale e, pertanto, di gestire immagini scalabili dimensionalmente. Nello specifico si tratta di un linguaggio derivato dall’XML che si pone l’obiettivo di descrivere figure bidimensionali statiche e animate.

Per la parte Javascript ho scelto la libreria Snap.svg perché è completamente nuova, è stata progettata appositamente per sfruttare le potenzialità dei nuovi browser, inoltre è stata scritta dallo stesso autore della famosa libreria Raphaël.

La caratteristica che rende unica Snap è l’abilità di importare una immagine SVG già esistente, che può essere creata con un software come Illustrator, Inkscape o Sketch e poi animata con Snap. Si possono addirittura caricare via Ajax delle stringhe di SVG e manipolate prima del rendering.
Approfondisci

Mining di criptovalute sul tuo sito personale

Negli ultimi mesi si sente sempre più parlare di criptovalute e dei possibili alti guadagni che si possono raggiungere. Per entrare in possesso di criptovaluta ci sono due possibili soluzioni: acquistarla pagandola con soldi veri oppure attraverso il mining.

Dal punto di vista tecnico il processo di mining non è altro che un’operazione di hashing inverso: determinare un numero (nonce) tale per cui l’hash SHA-256 di un insieme di dati rappresentante il blocco sia inferiore a una soglia data. Questa soglia, chiamata difficoltà, è ciò che determina la natura concorrenziale del mining di criptovaluta: più potenza di calcolo viene aggiunta alla rete bitcoin e più questo parametro aumenta, aumentando di conseguenza il numero di calcoli mediamente necessari a creare un nuovo blocco e aumentando quindi il costo di creazione dello stesso, spingendo i nodi a migliorare l’efficienza dei loro sistemi di mining per mantenere un bilancio economico positivo. [fonte: Wikipedia]

Per diventare un miner è sufficiente un computer collegato ad internet, tuttavia, affinchè il mining sia efficiente, è praticamente obbligatorio utilizzare hardware dedicato. Questa strada richiede un costo iniziale di qualche migliaio di Euro per acquistare una macchina dedicata e successivamente una spesa continuativa per il consumo di energia elettrica.

Negli ultimi anni l’hashrate è aumentato esponenzialmente cosa che rende sempre piú difficile risolvere i blocchi come persona singola, rendendo così estremamente difficile ricevere il pagamento del premio, per compensare tutte queste difficoltà sono state create le Mining Pool.
Una mining pool è un insieme di persone che minano mettendo assieme le loro forze per aumentare la loro percentuale di hashrate. Così facendo la probabilità di trovare un blocco cresce in positivo a causa dell’alto livello di hashrate usato per processare un blocco piú velocemente.
Approfondisci

jQuery plugin: Popup Checkbox List

Vi è mai capitato di avere, all’interno di un form, una lista interminabile di checkbox per la stessa scelta?
Graficamente l’aspetto della pagina ne risente notevolmente e anche l’utente finale può sentirsi scoraggiato dal compilare un modulo apparentemente molto lungo.
Per risolvere questo problema ho creato un plugin per jQuery che rende possibile mostrare in una finestra modale l’elenco di checkbox interessato, in maniera da compattare la lunghezza del form, nel quale vengono mostrare solo le scelte effettuate.
Approfondisci

Processing.js: creare una piantina per la prenotazione di posti in HTML5

Una delle potenzialità più interessanti di HTML5 è l’introduzione dell’elemento Canvas, il quale permette di effettuare un rendering dinamico di immagini tramite un linguaggio di scripting.
Per sfruttarlo al massimo, sono nate numerose librerie Javascript che ne semplificano l’utilizzo, tra cui Processing.js

Processing.js è un progetto imparentato con il più popolare linguaggio di programmazione visuale Processing.
Questa libreria permette di scrivere codice in linguaggio Processing e visualizzare il risultato su una pagina web: la magia avviene trasformando il sorgente in codice Javascript.

In seguito ad un progetto su cui ho lavorato recentemente, ho pensato di sviluppare una demo più vicina alla realtà rispetto agli esempi che si possono trovare sul sito ufficiale.

Utilizzando questa tecnologia, ho creato la piantina di un teatro, sulla quale è possibile selezionare i posti per effettuare la prenotazione di uno spettacolo.
Approfondisci

JQuery Validation per Array di elementi Input

Utilizzo da anni il plugin Validation di JQuery e lo reputo molto funzionale; recentemente mi è capitato di dover validare un array di elementi input e ho scoperto che in questa situazione presenta dei limiti, nel senso che non è in grado di validare tutti gli elementi dell’array, ma solo il primo.
Per questo motivo ho fatto una ricerca in rete ed ho trovato una soluzione (non ufficiale) che risolve il problema senza intaccare il funzionamento generale. Per rendere ancora più semplice l’utilizzo ho scritto una estensione, in maniera da non dover modificare direttamente i file sorgenti del plugin.
I miei test sono stati utilizzando la versione 1.5.2 di jQuery Validation.
Approfondisci

Face detection per tutti i gusti

Come si può intuire dal nome stesso, la Face detection è una tecnologia utilizzata per riconoscere, o meglio, determinare la posizione e dimensione di volti umani all’interno delle immagini digitali.

Questa tecnologia, ormai onnipresente sui principali social network, ha raggiunto la maturità ed è dimostrato dal fatto che sono proliferate implentazioni in tutte le forme e linguaggi di programmazione.

Di seguito, propongo alcuni progetti che hanno attirato la mia attenzione.
Approfondisci