“Ricetta del giorno” è un gadget avanzato che utilizza solo metodi pubblici disponibili e ben documentati.
Legge le ricette da una sorgente XML esterna e le visualizza una per volta. L’utente può navigare attraverso tutte le ricette presenti nel gadget. Il codice utilizza un semplice collegamento e visualizza la maggior parte del suo contenuto utilizzando il metodo innerHTML che risulta facilmente comprensibile agli sviluppatori web tradizionali.
Il database delle ricette contiene più di 1000 ricette, divise in 4 categorie differenti.
Non potendo caricare il file XML che contiene le 1000 ricette a ogni caricamento di pagina, a causa della sua notevole dimensione e volendo visualizzarle in modo completamente casuale, il gadget utilizza alcune semplici funzionalità per caricare le ricette in background.
Funziona nel modo seguente:
- Lo script di esportazione XML restituisce solo 10 ricette in modo completamente casuale
- All’inizio o quando l’utente cambia categoria, il gadget parte da zero e carica 10 ricette in un array
- Quando ci sono meno di 5 ricette nell’array, il gadget inizia in background a scaricare 10 nuove ricette in modo casuale
- Quando è terminato lo scaricamento, il gadget aggiunge le nuove ricette nell’ array. Se una delle nuove ricette è già presente nell’array, viene ignorata.
- Quando non si può aggiungere una delle 10 ricette perché sono già tutte presenti, si suppone che l’utente abbia visualizzato una gran parte delle ricette, quindi si svuota l’array e si riparte da zero
Questa soluzione non garantisce che l’utente veda tutte le ricette, ma esiste un’elevata probabilità che si alternino un numero sufficiente di ricette prima che venga ripetuta una già visualizzata.
Vi è poi un semplice effetto sfumato che viene mostrato quando l’utente cambia ricetta. L’elemento del DOM contenente l’ultima ricetta ne ottiene una copia e la nuova ricetta sostituisce quella originale.
Utilizzando z-index nei CSS, l’elemento copiato è mostrato sopra la nuova ricetta. Con una semplice funzione JavaScript, l’opacità della ricetta copiata viene ridotta progressivamente. Quando l’opacità raggiunge lo 0%, la copia è rimossa dal DOM. Nel caso in cui l’utente cambi le ricette molto velocemente, le “richieste di cambiamento” vengono accodate.
