Grafici in HTML 5 con Graph.js

Se avete la necessità di visualizzare dei grafici (Line chart, Bar chart, Radar chart, Polar area chart, Pie chart e Doughnut chart) vi consiglio di dare un’occhiata a Chart.js.

La libreria ha una carenza che secondo me è da evidenziare: la mancanza di interattività.
Se non avete bisogno di gestire click, hover, ecc… potrebbe essere una buona alternativa a Google Chart (che per ora continuo a preferire).

UPDATE: A causa di problemi legati alla proprietà intellettuale (il datore di lavoro dello sviluppatore non era molto felice del codice che aveva pubblicato perchè simile a quello utilizzato in lavori precedenti) il sito è stato chiuso (incluso il repository in Github).
Il progetto è tornato online, viva l’open source!

Bootstrap 3 preview (Release Candidate)

Se seguite con passione lo sviluppo di Bootstrap 3 vi consiglio di dare un occhio all’anteprima della Release Candidate dove potrete vedere parecchie novità.

Secondo il mio modesto parere la novità più importante è la seguente:

With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we’ve rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they’re baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.

Per quelli che invece sono preoccupati nel vedere i flat button, non preoccupatevi! i gradienti sono stati temporaneamente rimossi per concentrarsi su altri aspetti ben più importanti (soprattutto per isolare al meglio questo aspetto grafico).

Volete avere un’idea di quanto manca al completamento di Bootstrap 3? Basta dare un’occhiata alla Milestone.

Ricreare il gioco Snake in HTML 5

No ragazzi, non sono in vena di giochi…semplicemente ho trovato questo tutorial molto semplice e chiaro per riprodurre il famosissimo gioco Snake in HTML 5 (per la precisione utilizzando il tag canvas).

Il gioco è stato intelligentemente diviso in più classi/oggetti:

  • game: gestisce sostanzialmente la UI del gioco inclusi lo start e stop;
  • snake: rappresenta il serpente, in particolar modo il suo movimento ed il rilevamento delle collisioni;
  • food: rende possibile il posizionamento casuale del “biscottino” che il serpente deve prendere per aumentare i punti (e la sua dimensione).

Il gioco non è definitivo (quindi può essere sicuramente migliorato) ma lo trovo molto utile per entrare nel mondo dei canvas e dell’HTML 5.

Bombermine: multiplayer con HTML5

Se avete 5 minuti di tempo (anche mezz’ora) vi consiglio di fare una partitina a Bombermine: il remake di Bomberman in HTML5.

Le tecnologie utilizzate sono:

I server sono “on the cloud” e riescono a gestire un migliaio di giocatori contemporanei, niente male eh!

Come riempire un hard disk con localStorage di HTML5

Dopo giorni con febbre a 39 finalmente mi sto riprendendo quindi posso continuare a scrivere nel blog.
Oggi vi presento un modo poco gentile di utilizzare il localStorage di HTML5: riempire completamente l’hard disk di un visitatore sconosciuto (a meno che non abbia Firefox).

Il principio è molto semplice: il localStorage permette di salvare dei dati nel browser dell’utente con delle limitazioni che dipendono dallo user agent (2,5Mb per Chrome, 5Mb per Opera, ecc…).
Queste limitazioni valgono per ciascun sottodominio quindi possiamo reciclare uno stesso script su più sottodomini (1.melodycode.com, 2.melodycode.com, ecc…): il bug è già stato segnalato quindi credo sia questione di tempo affinchè venga risolto.