Slush – L’alternativa a Yeoman basata su Gulp

Sono sempre alla ricerca di strumenti in grado di migliorare/velocizzare il flusso di attività dei progetti su cui lavoriamo e quando pensi di aver trovato la soluzione per la gestione dello “scaffolding” (vedi Yeoman) e ti capita di leggere robe come questa inizi a rimettere tutto in discussione…

L’articolo risale ad oltre un anno fa ma ammetto la mia ignoranza: di Slush non avevo mai sentito parlare…

Se usate Gulp e non avete ancora iniato ad usare strumenti per lo scaffolding provate a dargli una possibilità.

http://slushjs.github.io/ | https://github.com/slushjs/slush

Imparare ReactJs – day #1

Imparare ReactJs

Learn JavaScript, Deeply. Learn JavaScript, Deeply. Learn JavaScript, Deeply. Learn JavaScript, Deeply… ”

Voglio prendere sul serio il suggerimento di Matt ed imparare ad utilizzare javascript in modo più approfondito.
Voglio farlo un po’ per WordPress ed un po’ perchè sono veramente convinto che il futuro del web sia Javascript e per iniziare ho deciso di partire ed imparare ad utilizzare ReactJs integrandolo nei miei prossimi progetti WordPress (si, è vero Calypso mi ha impressionato).

Imparare ReactJs – da dove iniziare

Il primo problema che mi si è presentato è che non sapevo neppure da dove partire, quindi ho iniziato a cercare un po’ di materiale: guide, tutorial, esempi, video, ecc…

Questa una prima selezione delle cose che mi sono sembrate più interessanti:

  1. https://facebook.github.io/react/docs/getting-started.html
  2. https://scotch.io/tutorials/learning-react-getting-started-and-concepts
  3. https://www.codementor.io/reactjs/tutorial/the-reactjs-quick-start-guide
  4. https://blog.risingstack.com/the-react-way-getting-started-tutorial/
  5. https://www.codementor.io/reactjs/tutorial/react-js-flux-architecture-tutorial
  6. http://buildwithreact.com/ – Build with React is a periodical of tutorials and advanced articles for the ReactJS library.
  7. https://zapier.com/engineering/react-js-tutorial-guide-gotchas/
  8. https://egghead.io/technologies/react – Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it’s easy to try it out on a small feature in an existing project. (video)
  9. http://cosenonjaviste.it/react-tutorial/ (ita)
  10. http://www.html.it/articoli/react-linterfaccia-utente-costruita-componente-su-componente/ (ita)

Cosa ho imparato

ReactJs è una libreria javascript per costruire interfaccie utente fatte da componenti riutilizzabili.
Nei primi tutorial che ho letto sembra che il suo utilizzo sia piuttoto semplice ma per essere utilizzata in una applicazione reale ha bisogno di altri componenti per poter gestire richieste a servizi esterni.

 

3 Librerie js/jquery da conoscere

Ho messo da parte questi 3 link con l’intento di guardarli in un secondo momento con più attenzione.
Ovviamente non sono ancora riuscito a farlo ma voglio almeno condividerli facendo almeno un copie ed incolla della loro descrizione.

Qualcuno le ha già usate?

 

  • jQuery++I am an MIT licensed collection of extremely useful DOM helpers and special events for jQuery 1.7 and later. I’m not a UI project like jQuery UI or jQuery Tools. Instead, I’m all about providing low-level utilities for things that jQuery doesn’t support. If Underscore is jQuery’s functional-programming tie, I am jQuery’s bald-spot covering toupee.http://jquerypp.com
  • Underscore.jsUnderscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery’s tux, and Backbone.js’s suspenders.Underscore provides 60-odd functions that support both the usual functional suspects: map, select, invoke — as well as more specialized helpers: function binding, javascript templating, deep equality testing, and so on. It delegates to built-in functions, if present, so modern browsers will use the native implementations of forEach, map, reduce, filter, every, some and indexOf.

    http://underscorejs.org/

  • Backbone.jsBackbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interfacehttp://backbonejs.org

Image credits: annais

5 siti monopagina

Da qualche tempo sono molto incurisito delle soluzioni “Single Page Websites“.
Si tratta di siti nel quale tutto il contenuto e strutturato in un’unica pagina e poi tramite un menu di navigazione (ed un po’ di JavaScript) ci si sposta da un contenuto all’altro con un “simpatico” effetto scorrimento.

Per chi fosse interessato ad implemetare questa tecnica suggerisco questo fantastico plugin per JQuery

Qui sotto ne ho raccolti 5 dove la creatività dei designer rende la navigazione molto piacevole.

Continue reading “5 siti monopagina”

Cariamento dinamico di risorse con JavaScript

Mi segno qui i link di due librerie JavaScript che permettono il caricamento a runtime di risorse tramite ajax.

Il loro utilizzo, in alcune situazioni, dovrebbe migliorare i tempi di risposta ed esecuzione delle pagine web sfuttando la velocità del caricamento parallelo offerta orma dalla maggiorparte dei browser.

Si tratta di  Labjs e Sexy.js che a dirla in breve permettono di effettuare caricameni asincroni e sequenziali con una sintassi molto molto pulita.

Qui qualche esempio che spero rendano il concetto…

Localizzazione dei file javascript

Per la validazione di alcuni form ho avuto la necessità di localizzare le stringhe di errore gestite all’interno di un file Javascript.
Volevo un sistema che non fosse eccessivamente invasivo, simile al gettext che uso con php ma che fosse indipendante da codice serverside e che mi permettesse di caricare e cambiare il file con le riserse localizzate anche a runtime.

Quello che ne è uscito mi piace molto e penso che sia anche sufficentemente scalabile pur avendo come limite il fatto di lavorare su array di stringhe un oggetto json piuttosto che su file compilati.

In pratica dopo aver dichiarato l’oggetto in cui “cercare” le traduzioni, ho preparato una funzione che verifica la presenza della stringa localizzata e nel caso non venga trovata mi restituisse quella “non localizzata”.

var Localization = {};
function _e( s ){
if(Localization && (v=Localization[s]) ) return v;
return s;
}

Usando questa funzione all’interno dei miei file js sono in grado di separare (ed eventualmente rimandare) le problematiche relatavie alla localizzazione rimanendo concentrato sul codice.
Nell’esempio qui sotto viene visualizzato un alert con un bel “ciao” sino a quando non viene caricata una risorsa in lingua

alert( _e(“ciao”) );

Per caricare il file con le risorse localizzate includo lo script a runtime con “getScript” (magari dopo aver letto un cookies…)

function LoadLocale( locale ){
/* es. LoadLoacale(“en_EN”); */
var Localization_path = “languages/”;
Localization = {};
try {
jQuery.getScript( Localization_path + locale + “.js”);
} catch(e) {}
}

Questa la struttura del file di risorse (en_EN.js) che nel momento in cui viene richiamata ridefinisce completamente l’oggetto “Localization”

// en_EN – javascript localization file
var Localization = {
“errore” : “error”,
“ciao” : “hello”,
“nome” : “name”,
“sito web” : “website”
}

Uno dei vantaggi di questo sistema è che andrò a localizzare solo ciò che mi serve con un approccio non intrusivo.
In atre parole se la stringa o il file non vengono trovati viene restituita la stringa non localizzata.
Ancora una nota per chi volesse usarlo: dentro LoadLocale c’è una chiamata a jQuery che quindi va considerato tra i requisiti necessari.

Per migliore le performance, indipendentamente dalla dimensione del file della localizzazione, sarebbe consigliabile minimizzare i file javascript con strumenti tipo questo.

Questi alcuni link da cui ho preso ispirazione.

3 libri per un web developer

Mi è stato chiesto di consigliare qualche libro in italiano ad un “web developer 2.0” alle prime armi.
Senza entrare nello specifico di un linguaggio lato server, voglio provare a fare un breve elenco di quelli che per il sottoscritto sono stati fondamentatali.

3-libri-per-un-web-developer

  • Cascading style sheets. La guida completa” di Eric A. Meyer.
    Partiamo dai CSS. Lo studio dei foglio di stile è secondo me la prima cosa da fare. Conoscere e capire come funzionano margin, padding e allineamento è fondamentale per progettare siti senza strutture rindondate.
    Per ulteriori appofondimenti consiglio anche Lo zen e l’arte del Web con il CSS
  • Javascript” di Flanagan David.
    Da affiancare alla conoscenza dei fogli di stile c’è sicuramente Javascript che è necessario per avere la padronanza dello sviluppo lato browser. Imparare “bene” questo linguaggio è una cosa che richiede molti anni di esperienza ma i rudimenti devono essere chiari a qualsiasi sviluppatore.
    ( nb. Questo libro è ormai un po’ vecchiotto ma in verità non ne conosco altri altrettanto validi. E’ uscita la 5° edizione in inglese.. )
  • XML, il linguaggio che rivoluzionerà il Web” di Elliotte Rusty Harold.
    Conclude la serie XML a cui arrivo direttamente senza passare da HTML in quanto lo voglio considerare già nel bagaglio di conoscenza di chi vuole definirsi “web developer
    Anche questo libro è molto vecchio e sembra che non sia più neanche in commercio. In alternativa suggerisco “Introduzione a XML” che, anche se non ho letto, mi sembra abbastanza valido.

In appendice metto ancora questo: Learning jQuery.
E’ in inglese ma penso che sia ottimo punto di partenza per studiare JQuery che rappresenza sicuramente uno dei migliori framework javascript in circolazione.

Altri suggerimenti?

approfondimenti javascript

Javascript è una di quelle cose che è facile dire “lo conosco” …

function hello() { alert(“hello”); }

… ma poi sono poche le persone che posso dire “lo conosco bene“.

Ora, non voglio dire che solo questi 3 guru lo conoscano a dovere, ma diciamo che non mi capita spesso di trovare persone capaci di proporre approfondimenti non banali e ricchi di contenuto.

Tornando a noi, voglio segnalare un post scritto da Claudio Cicali, che mi è capitato di leggere un paio di giorni fa e di cui sono rimasto veramente affascinato

L’argomento penso sia molto interessante: “closure in Javascript“.

Una delle più potenti feature di JavaScript è la possibilità di usare una particolare tecnica di mantenimento dello stato chiamata closure. Va detto subito che il concetto di “closure” non è stato inventato dal JavaScript; altri linguaggi ne fanno uso, talvolta implementando anche un’apposita keyword del linguaggio stesso.

Capire bene le implicazioni di questo meccanismo non è banalissimo, ma per la sua potenza e la sua grande esposizione ai bachi più insidiosi, permette di salire di un gradino nella propria conoscenza di JavaScript; personalmente, ritengo che esistano due tipologie di programmatori JavaScript: chi sa come usare le closure e chi no 🙂

Fatta la doverosa premessa, iniziamo dal principio…

Non mi rimane che fare i miei complimenti a Claudio e sperare che continui a scrivere approfondimenti di questo livello.

JW Flash Mp3 Player – update

E’ passato parecchio tempo da quando su queste pagine vi parlavo di un questo player mp3 realizzato interamente con tecnologa Adobe Flash, ed oltre ad essere passata un sacco di acqua sotto il ponte, ci sono stati anche un sacco di aggiornamenti.

Partiamo dall’aspetto grafico, … quello che una volta era così:

( versione 1.1 )

JW Flash Mp3 Player - ver. 1.1

adesso è così:

( versione 3.9 )

JW Flash Mp3 Player - ver. 3.9

ma con una quantità di opzioni per personalizzarne l’aspetto ed il comportamento veramente notevole.

In pratica possiamo cambiare colori, dimensioni, aggiungere immagini, visualizzare la durata del brano, aggiungere un pulsante per il download, utilizzare un singolo file o un file XML che funga da playlist e tantissime altre cose.

L’utilizzo rimane comunque molto semplice, e giusto a titolo esemplificativo ecco le righe di codice necessario per l’utilizzo nella sua versione più minimale.

[snippet=3066]

Nell’esempio viene usato SWFObject ( che deve essere presente nella stessa dir del player ) che altro non è che uno script javascript per l’utilizzo di Flash senza troppi problemi.

Se non vi piace come soluzione Jeroen ha messo a disposizione un wizard per le generazione del codice necessario senza l’utilizzo di javascript.

Per i più pigri, che magari vorrebbero un plugin per wordpress che facesse tutto da solo, aggiungo ancora un paio di linksss …

Merita però una citazione particolare Mediacaster, che è sempre un plugin per wordpress, ma che non si limita e utilizzare il lavoro di Jeroen per i file mp3, ma integra anche una gestione per i video ( file .flv).

Concludo con un avvertenza, se avete domande o dubbi, prima di chiedere, leggete 10 volte il readme e poi provate con il forum.

Iterare JSON con javascript

Non voglio soffermarmi a parlare di cosa e come usare JSON ma di come attraversarlo in modo ricorsivo.

Nel mio caso avevo bisogno di gestire una matrice complessa, velocemente modificabile tramite javascript, ma prima dell’invio al server dovevo trasformare il tutto in formato XML.

La struttura dinamica della matrice JSON non mi permettava un approccio statico, e quindi l’unica strada percorribile mi è sembrata un iterazione ricorsiva.

La funzione fa uso della proprietà “constructor” per capire il tipo di aggetto contenuto nella coppia e quindi valutare la gestione della ricorsività.

function jsonIterator( obj ) {
 for ( var i in obj ) { 
  if ( obj[i].constructor.toString().indexOf('Object') < 0 ) { 
   alert( "<" + i + ">" + obj[i] + "</" + i +">" );
  } else {
   // se è un oggetto gestisco la ricorsività
   alert( "<" + i + ">" );
   jsonIterator( obj[i] );
   alert( "</" + i + ">" );
  }
 }
}

Se quindi ipotizziamo un matrice complessa simile a questa …

o = {}
o.a = 1
o.b = [9,8,7,6,5]
o.c = {}
o.c.aa = 11
o.c.bb = 22
o.c.cc = {}
o.c.cc.aaa = 111
o.c.cc.bbb = "stringa"
o.c.cc.ccc = [1,2,3,4,5]
o.c.dd = 33
o.d = "stringa"

.. possiamo attraversarlo iterarlo semplicemente scrivendo:

jsonIterator(o)

Forse ho scoperto l’acqua calda … ma mi sento tanto bravo 🙂 🙂

Per il momento è testato solo con ie6 e FF1.5, se riesco domani provo con ie7 e FF2

jCarousel un plugin per jQuery

Continua a stupirmi la velocità con cui continuano ad essere sviluppati nuovi plugin per jQuery, alcuni del tutto originali mentre altri ispirati da altre librerie.

Nello specifico sto parlando di Carousel e del suo porting in versione jQuery

Per quanto riguarda la documentazione ed il numero di funzionalità, pur non avendo fatto un controllo accurato, mi sembrano equivalenti: autostart, scroll verticale , css ed immagini personalizzabili ed integrazione con ajax.

Continue reading “jCarousel un plugin per jQuery”

jQuery compie un anno

Il 22 Agosto 2005 venne pubblicato il primo post dove furono illustrati i contetti alla base di jQuery: anche se in ritardo tanti auguri !

Ad un anno di distanza ( una coincidenza ??? ) viene rilascita la release 1.0

A lot of work has gone into this release. A lot of bugs fixed, a ton of new features, and a complete overhaul of how the jQuery development process is run.

Oggi vengono pubblicate le prime bugfix ( Release 1.0.1 ) tra cui il supporto nativo al nuovo oggetto Ajax presente in Internet Explorer 7

Si raccomanda vivamente l’aggiornamento alla nuova versione.

[tags]jQuery[/tags]