DOMmy.js: animazioni CSS3 e controlli DOM via Javascript

DOMmy.js è una leggera libreria Javascript, priva di dipendenze esterne, che assiste principalmente lo sviluppatore nella produzione di animazioni CSS3 attraverso controlli Javascript, grazie al motore di selezione e navigazione del DOM compreso nella stessa libreria.
DOMmy.js pesa meno di 4kb nella versione “compressa” (adatta, dunque, ad essere utilizzata in produzione) e possiede una curva d’apprendimento molto bassa, la cui facilità di utilizzo diminuisce ulteriormente se lo sviluppatore ha già avuto dimestichezza con altri framework Javascript che permettono di lavorare con le animazioni DOM, come ad esempio jQuery.
A differenza di quest’ultimo però, DOMmy.js non è un framework full-featured, ne presenta un motore di selezione proprietario. Al contrario. DOMmy.js è una struttura minimale che si focalizza sulla produzione di animazioni, eventi e controlli DOM utilizzando i moderni strumenti offerti dalle straordinarie proprietà CSS3.

Ad esempio, il seguente codice andrà a selezionare gli elementi aventi come attributo ID “myFirstElement” e “mySecondElement” applicando due animazioni concatenate (tramite il metodo FX applicabile agli elementi seleionati) sia sulle proprietà “font-size” sia sulle proprietà “color”, con una durata di 1 secondo ciascuna:

$$('#myFirstElement, #mySecondElement')
.fx({'font-size': '40px', 'color': 'yellow'}, 1)
.fx({'font-size': '10px', 'color': 'red'}, 1);

Tra le funzionalità realizzabili attraverso DOMmy.js troviamo:

• la navigazione nel DOM della pagina;
• la creazione di potenti animazioni sfruttando il motore di CSS3 attraverso il Javascript;
• la selezione di elementi e di collezioni di elementi;
• l’aggiunta di singoli o molteplici eventi, proprietà CSS, attributi HTML e dati storage agli elementi o alle collezioni di elementi;
• una struttura this coerente;
• un evento DOMReady per lavorare con la pagina senza dover attendere il caricamento di risorse quali immagini o video.

DOMmy.js è progetto Javascript orientato alla modernità ed ai nuovi standard e, per questo motivo, risulta essere totalmente cross-browser e compatibile con le versioni più recenti dei maggiori browser, ma non lo è altrettanto completamente con le versioni datate che non supportano funzionalità ormai standard come le nuove proprietà/valori CSS, come le animazioni, ed altri controlli Javascript. Tuttavia questo non colloca DOMmy.js nella schiera di framework Javascript che utilizzano un “DOM virtuale” o l’utilizzo di attributi HTML customizzati per generare strutture MVC di controllo del flusso. DOMmy.js è una libreria Javascript più simile a quelle della generazione precedente, con le differenze sopra elencate.

Con DOMmy.js possiamo, come abbiamo detto, utilizzare l’evento DOMReady, che ci permette di lavorare con il DOM senza dover aspettare il caricamento di altre risorse, e con il getting/setting di eventi ed attributi:

$$$( function() {
  $('myel').css({'display': 'block', 'color': 'white'});
  $('myel').on('click', function() {
    log('Hey!');
  });
  var title = $('myel').attr('title');
});