Alcuni giorni fa ho ricevuto un contatto da parte di Packt Publishing, casa editrice specializzata in libri di informatica (dalla programmazione alla grafica, con tutto quello che ci sta in mezzo), in cui mi fornivano l'opportunità di recensire un libro su CakePHP, scritto da Mark Robert Henderson, chiamato "Instant CakePHP Starter".

Avevo già fatto qualcosa del genere in passato, così ho accettato di buon grado.

Quello che mi ha incuriosito fin da subito è quell'"INSTANT" che fa capolino sin dalla copertina, seguito da "Short | Fast | Focused". Tutte caratteristiche che ritengo fondamentali in un libro/manuale di programmazione: odio perdere giorni a leggere teoria, preferisco andare al sodo e poter provare direttamente, magari contemporaneamente, quello che sto studiando.

Cosa è

Questo libro fa esattamente quanto promesso dalla copertina: l'autore parte da un'esigenza pratica e, dopo una breve panoramica sul framework e sul pattern MVC, ci spiega come creare l'applicazione dall'inizio alla fine, spiegando i vari passaggi intermedi: l'installazione, la configurazione iniziale, l'utilizzo del tool da riga di comando "cake", fino alla pubblicazione online, sfruttando il servizio gratuito di AppFog. Nel giro di poche decine di pagine Mark ci mostra come, sfruttando automatismi e convenzioni, CakePHP sia in grado di generare un'applicazione funzionante, seppur grezza, scrivendo pochissime linee di codice.

Poco dopo la metà del libro, dopo aver creato la nostra applicazione, l'autore va avanti e ci illustra altre importanti funzionalità di Cake: routing, themes, behaviors, fixtures e tests.

Secondo me

Quello che mi è piaciuto maggiormente di questo libro è che nel giro di poche pagine (un'ottantina in tutto) offre una bella panoramica di quanto offre CakePHP e lo fa in modo piacevole e diretto, senza tralasciare gustosi particolari. È un libro adatto sia a chi sta iniziando a conoscere questo bellissimo framework sia a chi, come me, lo utilizza già da alcuni anni ma ha sempre qualcosa da imparare o da migliorare. E poi... costa meno di 10 euro, è decisamente abbordabile ;)

Twitter Bootstrap, per chi non lo conoscesse, è un bellissimo framework css, realizzato originariamente da quei geniacci di Twitter per semplificare la realizzazione di interfacce che, oltre ad essere graficamente consistenti (una manna dal cielo per chi, come me, non è dotato di particolari doti grafiche), sono anche responsive. In grado quindi di adattarsi a diverse risoluzioni e tipi di dispositivo: cellulare, tablet, schermo ecc.

Lo scaffolding di CakePHP, (o il codice generato da bake), genera invece layout molto semplici, con pagine che sarebbero da modificare pesantemente per adattarle all'uso di bootstrap. 

Per fortuna c'è un punto d'incontro: javascript. Sfruttando questa bellissima tecnologia (ed in particolare jQuery) possiamo adattare il codice generato da CakePHP in modo da far gestire la grafica a twitter bootstrap, senza doverlo nemmeno modificare.

Per comodità ho realizzato un piccolo file javascript, che prende le più comuni classi generate da CakePHP e gli "appiccica" gli stili di cui avevo bisogno.

Se anche tu hai necessità di fare qualcosa del genere, chissà, magari questo può servirti da spunto:

// cakePHP bootstrap - based on twitter bootstrap 3
$(document).ready(function() {

/*
* LAYOUT
* aggiungo le classi relative alle dimensioni degli elementi
*/
$("#container").addClass("row-fluid");
$("div.actions").prependTo("#content");
$("div.actions").addClass("span3");
$("div.index").addClass("span9");
$("div.form").addClass("span9");
$("div.view").addClass("span9");
$("div.related").addClass("span9");
$("div.flashMessage").addClass("span9");

/**
* TABELLE
* aggiungo il tag <thead> per la riga di intestazione delle tabelle
**/
$("table").prepend( $('<thead></thead>').append($('table tr:first').remove()) );

/*
* FORMS
* classi per form ed inputs
*/
$("input:not(.datepicker)").addClass("input-block-level");
$("textarea").addClass("input-block-level");

/*
* BOTTONI
* classi per bottoni, link etc.
*/
$(":submit").addClass("btn btn-success");
$(".actions ul li a").addClass("btn-block");
$("#content a").addClass("btn");
$("div.actions").addClass("row");
$(".actions a[href*='delete']").addClass("btn-danger");
$("a[href*='add']").addClass("btn-primary");
$("a[href*='view']").prepend("<i class='icon-search'></i> ");
$("a[href*='edit']").prepend("<i class='icon-edit'></i> ");
$("a[href*='delete']").prepend("<i class='icon-remove'></i> ");
$("form[action*='delete']").next("a").prepend("<i class='icon-remove icon-white'></i> ").addClass("btn-danger");
/**/
});

Questa mattina un cliente mi ha avvisato, creandomi un po' di imbarazzo e notevole disappunto, che le email inviate dal modulo contatti di questo sito non arrivavano nella mia casella di posta, pur dando al mittente un avviso di "email inviata correttamente".

Bella storia.

Indagando un po' ho scoperto che il mio hosting ha cambiato (senza avvisarmi, direi) le policy di sendmail cosicché tutto ciò che veniva spedito dal sito senza un preciso indirizzo email finiva... nel cestino.

Alé.

Chiedo scusa a chi mi avesse mandato mail nelle ultime settimane senza ricevere alcuna risposta, ora il problema sembra comunque risolto.

Emanuele

Perdona il titolo  nebuloso, ma non so come riassumere meglio questa piccola ma utie pillola di codice.

Come al solito parto dalla necessità: ho creato una piccola applicazione che per via dei lunghi tempi di esecuzione rende difficile capire cosa sta facendo, fino a quando non ha terminato l'ultimo script. Il che può essere ragionevole fino a quando lo script richiede pochi secondi, ma quando ne richiede alcune decine... è decisamente troppo.

Da qui la necessità di stampare sullo schermo un resoconto per ogni operazione completata, per poi fare il resoconto finale al termine del tutto. Più facile a dirsi che a farsi, probabilmente. Per me di sicuro lo era finché non mi sono imbattuto in questa piccola chicca: 

function echo_live($txt) {
    // inizializzazione del buffer per l'output
    if (ob_get_level() == 0) ob_start();
    echo $txt;
    // per Chrome e Safari si deve aggiungere questa istruzione
    print str_pad('',4096)."\n";
    // invia il contenuto al buffer
    ob_flush();
    flush();
}

Queste poche righe di codice fanno proprio ciò che mi serve: stampano una stringa a video immediatamente, senza aspettare il "termine dei lavori". Figata. Quello che è più importante è che, in sostanza, invece di fare un "echo" dell'informazione che voglio mostrare a video, basta utilizzare la nuova funzione "echo_live", senza dover riscrivere pressoché nulla nel codice.

Comodo vero?

A volte si perde tempo cercando di creare effetti semplici con javascript, magari aiutandosi con jQuery, per poi scoprire che il tutto sarebbe stato molto più semplice facendo semplicemente affidamento su altri strumenti, più adatti a questo genere di cose. Mi riferisco a piccoli effetti grafici, che spesso possono essere gestiti direttamente da CSS3 in modo estremamente più semplice rispetto a qualunque script o plugin fatto in javascript.

Andiamo con ordine: avevo la necessità di creare un semplice effetto di zoom passando con il mouse sopra gli elementi di un menu ed avevo pensato, inizialmente, di crearlo con jQuery. Non è un'operazione complessa, ma può diventare tediosa e visto che alla fin fine si tratta solo di manipolare alcuni stili CSS ho pensato: ma se lo facessi direttamente con i css3? D'altra parte, ormai le animazioni sono supportate dalla maggior parte dei browser...

Il risultato lo puoi vedere qui: http://goo.gl/Fo30t

Come funziona? In realtà è molto semplice.

Ho impostato uno stile a #test li, che descrive la grafica di default degli elementi del menu e -bada bene- quella a cui bisogna tornare quando finisce l'hover. In queste righe ho quindi inserito anche le istruzioni per l'animazione di ritorno alla grafica standard: transition: all .1s ease-in;

Poco sotto ho impostato la grafica che deve essere utilizzata nell'effetto hover: voglio quindi che il box venga zoomato al 130% (transform: scale(1.3)) nell'arco di 2 secondi (transition: all .2s ease-out;), e che venga spostato leggermente più in alto per dargli un effetto più "rimbalzante" (position:relative; top: -5px;).

Tutto qui. Non c'è davvero nient'altro da dire, è di una semplicità disarmante ed il bello è che questo genere di animazioni è supportato nativamente dalla maggior parte dei browser (utilizzando i consueti prefissi -ms, -o, -moz e -webkit, per ora).

Ovviamente sulle vecchie versioni di internet explorer il menu non funziona, ma... è ancora così importante?