Personal tools

HTML5

Sep 24, 2014

Le tartarughe a From the Front 2014: the Temple of the DOM

Sembra di camminare sui biscotti... nooo, non sono biscotti!

Le tartarughe a From the Front 2014: the Temple of the DOM

Torna a calcare il palcoscenico del Duse di Bologna uno degli eventi più importanti d'Italia per chi si occupa di Front End. I colpi di scena non sono mancati!

Cos’è From the Front?

E’ una conferenza dedicata al web. Si rivolge in particolare ai cosiddetti sviluppatori "Front End", coloro che si occupano della struttura, della presentazione e del comportamento di un sito, di un portale o di una applicazione web.

read more

Mar 11, 2014

GistBox: finalmente gli strumenti di gestione che mancavano su Gist

Remember Sammy Jankis?

GistBox: finalmente gli strumenti di gestione che mancavano su Gist

Filed Under:

Non sarebbe male poter salvare in modo rapido piccole parti di codice/testo, e renderlo poi facilmente ricercabile; qualcosa che funzioni come una memoria a lungo termine

Questa la premessa di qualche mese fa quando, cercando in rete, mi sono imbattuto in GistBox. Un incontro quasi "fatale" oserei dire; ancora non lo sapevo, ma era proprio il tool che stavo cercando.

Cos'è GistBox

GistBox è un'applicazione web (disponibile anche come Chrome app) creata da Rui Jiang allo scopo di aiutare gli sviluppatori a organizzare in modo semplice i propri snippet, ponendosi come interfaccia a Github e aggiungendo a quest'ultimo un ulteriore livello logico ricco di funzionalità.

read more

Jul 05, 2013

Vuoi caricare i JavaScript del tuo sito solo quando ti servono davvero?

In vacanza più leggeri... anche i nostri siti!

Vuoi caricare i JavaScript del tuo sito solo quando ti servono davvero?

Filed Under:

Introduzione a Conditioner.js, una libreria che ti permette di caricare i moduli js del tuo sito solo alla presenza di un determinato stato che potrai definire tu

Non è una novità: più aggiungiamo funzionalità sotto forma di librerie JavaScript, più i nostri siti si appesantiscono. Se però le funzionalità aggiunte sono necessarie, quello che possiamo fare è ottimizzare le risorse e limitarne le dimensioni, quindi il tempo necessario a scaricarle.

Non sarebbe bello avere a disposizione una sintassi che ci permetta di caricare codice JavaScript in base a condizioni verificate runtime, analizzando lo stato della pagina? Caricare lo snippet di codice solo se richiesto e se predeterminate condizioni sono realizzate?

Un caso estremamente familiare a tutti i front-end developer: quando progettiamo il nostro sito per dispositivi mobile tendiamo a rimuovere i componenti che non sarebbero utili all'utente (solitamente per le limitazioni dello spazio disponibile), allo scopo di rendere meglio fruibili i contenuti web più importanti. Se gli elementi che vogliamo rimuovere utilizzano funzionalità JavaScript, però, questi ultimi vengono comunque scaricati. Non vale forse la pena evitare che ciò succeda (risparmiando così anche un'inutile chiamata al server)?

Conditioner.js è esattamente quello che ci serve. E' una libreria JavaScript che si occupa di fornire un linguaggio che permetta la definizione di condizioni per caricare funzionalità solo se necessario.

Siamo noi a definire i requisiti affinché il modulo js venga caricato.

Inoltre Conditioner.js consente di gestire il caricamento di più risorse JavaScript. I vari moduli js vengono caricati separati l'uno dall'altro impedendo loro di andare in contrasto.

read more

Jun 20, 2013

Leaflet: un framework per mappe interattive leggero e performante

Leaflet web maps

Leaflet: un framework per mappe interattive leggero e performante

Filed Under:

Leaflet è un framework JavaScript veramente interessante, sicuramente la scelta giusta per l'integrazione di mappe interattive HTML5 su applicazioni web per mobile

Recentemente ho avuto l'occasione di lavorare ad un progetto per lo sviluppo di un'applicazione web per mobile, che mi ha dato l'opportunità di approfondire la conoscenza di un framework JavaScript decisamente interessante: Leaflet.

Esistono decine di framework per l'integrazione di mappe interattive disponibili in rete, ma a mio avviso Leaflet è veramente degno di nota.

Paragonabile in termini di funzionalità ad altri framework, quale per esempio OpenLayer, Leaftet sorprende per leggerezza e facilità d'uso.

Il core di questa libreria JS ha un peso veramente ridotto (circa 100KB).
Il codice è attuale: i namespaces sono brevi, fa buon uso di tecniche come method chaining ecc., insomma in linea con lo stile di importanti librerie JavaScript come per esempio jQuery.

L'interfaccia è moderna e fluida, compatibile con la maggior parte dei browser in circolazione.

 

Compatibilità mobile:
- Safari for iOS 3/4/5/6+
- Android browser 2.2+, 3.1+, 4+
- Chrome Android 4+, iOS
- Firefox for Android
- Other webkit-based browsers
- IE10 for Win8-based devices

Leaflet è un progetto Open Source creato da Vladimir Agafonkin. Gratuitamente scaricabile direttamente dal sito ufficiale leafletjs.com, è ospitato anche su github.com, dove grazie alla comunità che lo supporta, si piazza tra i migliori 40 progetti open source con ben 5000 star.

Interessante la possibilità di utilizzare come sistema di riferimento (CRS), le dimensioni in pixel di immagini non georeferenziate, utile nei casi in cui si ha la necessità di sviluppare mappe interattive a partire da immagini di grandi dimensioni, come per esempio per un videogioco.

Rimando a questa lettura per approfondimento:

Nutrita la lista dei plugin disponibile online, che ne estendono le funzionalità http://leafletjs.com/plugins.html.
Per esempio, io ho trovato interessante Leaflet.TextPath, che permette di aggiungere del testo direttamente agli oggetti disegnati dinamicamente nella mappa.

Nota per gli sviluppatori Python, su Pypi è presente una versione pacchettizzata per l'installazione su CMS Plone.

Conclusioni

"Divertente", penso sia il primo aggettivo che mi viene in mente se penso a Leaflet.
Decisamente un'ottima libreria adatta per il web, non troppo complessa e di grande effetto. Particolarmente indicata per il mobile.

read more

Jun 04, 2013

Front-end frameworks, presente e futuro delle interfacce utente

Una breve introduzione a questi nuovi strumenti per il web design agile e alla loro integrazione con il nostro amato cms Plone

Spend your time innovating, not replicating (cit. Blueprint framework)

Per chiarire cosa sia il front-end development si potrebbe usare una metafora automobilistica (come nella migliore tradizione dei venditori): costruire una web app è come costruire una macchina, il front-end developer è chi si occupa di montare i sedili in pelle, le finiture in radica, il volante, i pedali ecc., mentre il back-end developer è chi si occupa di montare il motore, i freni e la trasmissione. Quindi il front-end development è tutta la parte di sviluppo che, una volta piazzati i componenti strutturali, si occupa di rendere il prodotto davvero utilizzabile e più confortevole.

read more