Migliorare il codice Javascript: indentazione, spazi, tabulazione, a capo e formattazioni

Scritto il 29 Maggio 2008
Nella categoria Guide, Javascript | 1 commento
Tag: , , , , ,

Solitamente scrivo io il codice che devo poi mantenere, ma capita di prendere altri programmi oppure semplicemente di voler curiosare; o anche di aver scritto un po’ di righe velocemente, senza prestare troppa attenzione e poi volerle espandere. In tutti questi casi il codice scritto deve essere ben indentato e formattato.

Codice

Immagine di dermiller

Per indentazione si intende l’uso degli spazi bianchi o della tabulazione, per allineare il codice in base al flusso e alle strutture del linguaggio come blocchi o istruzioni di controllo. Per parlare chiaro, questo è codice indentato.

if (condizione == true)
    esegui();
else
    exit;

Questo è indentato con gli spazi (nel numero di 4), questo metodo di scrittura rende più semplice la lettura del codice, perché seguire il flusso logico del codice è più semplice, diventa chiaro che esegui dipende dalla condizione precedente.

if (condizione == true)
esegui();
else
exit;

Questo codice sopra è chiaramente molto meno semplice da leggere, è necessario sforzarsi molto di più per capire come funziona.

Indentazione

Alcuni editor hanno già in loro la funzionalità per “rendere bello” il nostro codice, strumenti chiamati solitamente auto-indenter, ma io non mi sono mai trovato bene, poi ognuno usa il suo e difficilmente cambierà per una funzione simile, almeno io non lo farei. Per questo vi consiglio questo tool: Online beautifuller. Ha proprio questa funzione, tutto con un unico click, inoltre utilizza il io stesso stile di indentazione, a volte chiamato K&R, dal nome dei famosi Kernighan e Ritchie, inventori del C. La scelta tra spazi e tabulazione è lasciata all’utente.

Formattazione

Un altro strumento utile, da utilizzare successivamente è Online syntax highlighting. Questo formatta in codice, lo colora in particolare, in modo da evidenziare le parole chiave, quasi tutti gli editor lo fanno già da loro, se il tuo non lo fa, ti consiglio di cambiarlo :P

Codice evidenziato

La sua utilità principale è per chi intende pubblicare codice online, perché fornisce l’HTML da inserire nelle pagine. Ricordarsi sempre di selezionare Javascript a sinistra, altrimenti non funzionerà benissimo!

Minimizzare e compattare

Ultime note su come disfare il lavoro fatto, molte volte si rivela utile anche questo, ma solo in fase finale. Il codice Javascript non viene compilato, ma gira così come lo scriviamo, quindi sicuramente leggibile, ma non compatto, mentre le pagine web devono essere il più leggere possibili. Sono stati creati quindi questi strumenti che minimizzano e compattano il codice, fino al minimo indispensabile e anche oltre volendo (restringendo anche i nomi delle variabili per esempio).

JS Minifier: forse uno dei migliori, permette la scelta anche di quanto comprimere.

BrainJar: uno dei primi e ancora buoni, servizi simili.

Packer: semplice semplice, ma efficace.

PHP Packer: script in PHP, da usare anche in locale.

« altri articoli

Forzare o bufferizzare l’output in php

Scritto il 20 Maggio 2008
Nella categoria Guide, PHP | Scrivi un commento
Tag: , ,

Mi è capitato in questi giorni di scrivere una pagina di PHP con una query mySQL piuttosto onerosa (si trattava di importare un file csv di decine di migliaia di righe); normalmente il browser dell’utente visualizza una bella pagina bianca in caricamento, questo perché PHP non mostra subito l’output, ma lo memorizza in un buffer e (a meno che non si riempia), mostra la pagina solo a caricamento completato.

Caricamento in corso...

Forzatura dell’output

È possibile fare in modo che tutto l’output genereato, tramite echo o print per esempio, venga restituito subito all’utente e quindi mostrato nel browser. L’istruzione, semplicissima, è

flush()

La documentazione si trova come al solito sul sito di php, flush.

Un possibile utilizzo è prima di un ciclo esoso, di una chiamata esterna oppure di una query mySQL, ad esempio

echo "<p>Esecuzione di $max importazioni...</p>";
flush();
for (var $i=0; $i < %max; $i++)
Mysql_query("LOAD DATA LOCAL INFILE...");

Questo codice avverte l’utente dell’importazione in modo che la sua attesa sia meno sgradita.

Bufferizzazione

Al contrario della forzatura sopra esposta, solitamente è consigliabile mantere l’output in un buffer e inviarlo all’utente solo in determinati momenti, questo perché forzare l’output con il flush impone al server una transizione attiva HTTP, con relativo scambio di dati, effettuarne di meno risparmia risorse al server e all’utente, inoltre è un altro ottimo consiglio per velocizzare il php.

I comandi che permettono di svolgere questa attività sono: ob_start, ob_flush.

La prima inizializza il buffer (infatti ob sta per Output Buffer), il secondo invia il contenuto del buffer all’utente, in modo che inizi a visualizzare la pagina.

Utilizzare queste funzioni, nelle pagine molto estese, velocizza la pagina e non a caso vengono utilizzate in tutte le maggiori piattaforme: Wordpress, phpbb, eccetera.

Per una trattazione più estesa, consiglio l’articolo di HTML.it e Pratical PHP Programming.

« altri articoli

Utilizzare SSH come un Tunnel Proxy (e configurare Firefox)

Scritto il 6 Maggio 2008
Nella categoria Guide, Mozilla | 1 commento
Tag: , , , , ,

Una delle possibilità, delle feature, offerte dai server SSH è utilizzare questa connessione come Proxy SOCKS: ormai i servizi SSH sono molto diffusi, alcuni hosting li forniscono, molte università o luoghi di ricerca, anche il privato, via OpenSSH sia su Linux che su Windows (con Cygwin) può averne uno proprio; mentre avere un tunnel ssh è comodissimo e a volte anche richiesto, magari per vedere una rete interna o anche solo per un rapido cambio di IP.

Il caso più tipico, purtroppo, è trovarsi su una macchina Windows senza shell installate, qui dobbiamo ricorre a PuTTY, per averlo basta scaricare il semplice PuTTY.exe ed eseguirlo senza installazione.

Configurare PuTTY per un tunnel ssh (proxy)

Nella prima finestra che viene proposta, è necessario inserire server ed eventualmente porta di connessione se diversa da quella standard. Ora, per avviare il servizio di proxy, aprire la sezione SSH, quindi selezionare Tunnels; qui va immesso un numero di porta (locale da aprire), nell’illustrazione ho utilizzato 8182, ma basta utilizzare un numero tra il 3000 e 65535, buoni numeri sono 8080, 8081 o 8182, quindi selezionare “Dynamic”, infine cliccare su “Add” per confermare la modifica.

Leggi il resto

« altri articoli

getClicky: strumento gratuito per monitorare le statistiche del proprio blog

Scritto il 29 Aprile 2008
Nella categoria Blog e blogsfera, Recensioni | Scrivi un commento
Tag: , , ,

Per un anno circa ho utilizzato reinvigorate come servizio di statistiche e mi ci trovavo bene, ma, oltre al fatto che non è ancora uscito dalla beta ad inviti, alla lunga alcune limitazioni si sono fatte sentire: resettavano alcuni dati a caso, senza nessuna possibilità di esportarli e non si riesce a gestire e monitorare un periodo al posto di un giorno singolo.

Ho deciso quindi di passare a Clicky Web Analytics (per gli amici getClicky, visto che trovo scomodissimo chiamare un sito con un nome diverso dal dominio); è un servizio gratuito, pensato sia per i blogger che per chi ha un sito generico, esiste sia il classico plugin per Wordpress, ma in realtà basta mettere un piccolo codice in un widget (o in un altro punto della pagina).

Pagina principale getClicky

Già in prima pagina ci sono tutte le informazioni utili di cui si può avere bisogno, sia quelle generali come visitatori, page-views eccetera, ma anche (da poco) da dove vengono i visitatori in percentuale (da motori di ricerca, bookmark, link, siti sociali come digg o stumbleupon) e un riassunto dei dati che troviamo sulle altre pagine.

Leggi il resto

« altri articoli

Consigli per script PHP più veloci

Scritto il 21 Aprile 2008
Nella categoria Guide, PHP | 1 commento
Tag: , ,

Oggi ho letto il post di antirez su cosa era e invece cosa è importante ora per la programmazione, quando si fa moltissimo scripting in PHP ad esempio, e pochissima “vera” programmazione in C o simili. In particolare è diventato più utile ottimizzare in modo anche “sporco” le righe di codice, piuttosto che sapere qual’è l’algoritmo più efficiente per affrontare un problema, perché questo secondo tipo di codice è molto meno utilizzato oggi, quando spopolano le web-application.

Quindi ho deciso di prendere spunto da tre articoli che trovai tempo fa su come ottimizzare la scrittura di codice PHP, verificare, e spiegarli.

Consigli generici: meno chiamate a funzioni

Sempre, sempre, sempre, fare meno chiamate possibili alle funzioni, questa deve essere una regola generale, sempre meglio tenere in memoria una variabile in più (che poi andrà distrutta con unset). Il classico esempio non è inserire una chiamata all’interno di un ciclo, ma all’esterno oppure dentro la prima clausola di un for

for($a = 0; $a < sizeof($array); $a++)

Questo va malissimo, piuttosto meglio

$max = sizeof($array);
for($a = 0; $a < $max; $a++) {
...
}
unset($max);

Oppure più carino

for($a = 0, $max = sizeof($array); $a < $max; $a++) {
...
}
unset($max);

Consigli generici: ordine nelle condizioni

Quando si controllano più condizioni tra loro è importante farlo nell’ordine giusto e con gli operatori logici giusti.

Ad esempio usando || e && al posto dei semplici | e &, i primi hanno il vantaggio di terminare il controlla appena le condizioni non sono verificabili, quindi se controlliamo che ($var1 && $var2), se già la prima condizione è falsa, non sarà valutata la seconda facendo risparmiare tempo macchina.

Grazie a questo principio, è possibile velocizzare il codice valutando le condizioni nell’ordine giusto, cioè nel caso di una condizione ($var1 || $var2) è preferibile mettere come prima condizione quella che più spesso viene verificata.

Usare funzioni più semplici possibili

PHP mette a disposizione diverse funzioni che fanno a prima vista la stessa cosa, ma in modo diverso; ad esempio per sostituire pezzi di stringhe, ci sono ereg_replace, preg_replace e str_replace ma sono diverse tra loro, in particolare le prime due sfruttano le Espressioni Regolari, mentre la seconda cerca stringe semplici; ovviamente utilizzare quest’ultima rende il codice molto più veloce, di almeno la metà, dipende dalla complessità della RegExp.

Allo stesso modo le funzioni explode è più veloce di split, visto che anch’essa sfrutta le espressioni regolari.

Infine consiglio di utilizzare time() al posto di date('U'), in quanto la mancanza di parametri rende la prima molto più rapida e leggera.

Conta pochissimo invece utilizzare le virgolette singole 'stringa' al posto di quelle doppie "stringa", la differenza, per chi non lo sapesse, è che se una variabile appare tra due virgolette doppie viene sostituita, con le singole no; ma la differenza è talmente minima che non vale la pena di fare salti mortali per controllare tutto il codice, se scappa una virgoletta doppia (magari anche perché vogliamo inserire un codice ascii come \n), è un errore perdonabile.

Consigli che non vale la pena di seguire

Gli articoli che ho citato si perdono purtroppo anche in alcuni consigli un approssimativi o poco approfonditi, che non vale la pena di seguire.

In particolare sembra che utilizzare === al posto di == dia alcuni vantaggi, ma in realtà non è proprio così, solo in alcuni casi. Il secondo operatore infatti controlla prima che i due oggetti siano dello stesso tipo, mentre il primo cerca di converti nello stesso tipo. In particolare:

('22' == 22) è VERO
('22' === 22) è FALSO

Ho verificato che confrontando stringhe uguali, non ci sono miglioramenti sensibili scambiando == con === .

Stesso discorso per le funzioni ctype_digit e is_numeric, che tra loro sono differenti: la prima verifica se in una stringa sono scritte solo cifre, mentre la seconda controlla se un oggetto è di tipo numerico (un int, float, etc) oppure se è una stringa che rappresenta un numero, prendendo quindi per buono il valore "0.12", per cui la ctype_digit restituirebbe falso.

« altri articoli

Utilizzo avanzato e trucchi di aMSN: avatar, emoticon, trilli, profilo, tab, inattività e log

Scritto il 14 Aprile 2008
Nella categoria Guide, Software | 2 commenti
Tag: , , , , , ,

Ho già parlato di aMSN, un ottimo client open source alternativo a MSN Live Messanger, disponibile anche per Linux tra l’altro. È venuto il momento di utilizzarlo al meglio imparando alcuni piccoli trucchi e dettagli su dove vengono salvati i dati.

Tab

Una delle feature migliori di aMSN è proprio l’apertura di una sola finestra per tutte le chat aperte, in modo da non essere sommersi in caso di troppi amici chiaccheroni. In Account > Preferenze, selezionare la tab Sessione, qui più in basso si può scegliere se non utilizzare le tab (Finestre normali senza schede), utilizzare sempre le tab (Una finestra singola con schede per tutti gli utenti della lista contatti), oppure utilizzare le tab solo per chi è nello stesso gruppo (Una finestra singola con schede per tutti gli utenti di uno stesso gruppo). Leggi il resto

« altri articoli

Seguire Naruto Shippuuden in italiano (su Veoh che è meglio di youtube)

Scritto il 8 Aprile 2008
Nella categoria Fumetti, Guide | Scrivi un commento
Tag: , , , ,

Il mio passato articolo su come guardare Naruto su youtube riscuote sempre un po’ di successo quindi decido di replicare, indicando come seguire la seconda serie di Naruto, Shippuuden, in cui loro sono più grandi, direi adolescenti. Tra parentesi a me piace abbastanza, la trovo molto ben fatta, sarà il degno successore di Dragon Ball, con cui condivide numerose caratteristiche. Ovviamente il materiale qui elencato è tutto anime in giapponese con i sottotitoli italiani; io non li trovo per niente pensanti, anzi, seguirli in lingua originale te li fa apprezzare ancora di più perché è tutto un clima diverso.

Naruto Shippuuden Revolution

Questo è il primo metodo che è trovato, il riferimento è il forum Naruto Shippuuden Revolution, i video vengono pubblicati su Veoh, ottima piattaforma di video, con qualità molto più alta di youtube, i primi sono stati pubblicati da DarkAp89, dal 46 in poi invece se ne prende carico Koyuki-Kakashi.

Dragon Ball Forever

Può sembrare strano, ma proprio una board con questo nome pubblica delle traduzioni alternative, ottime e con un carattere anche più leggibile, di Naruto Shippuden; purtroppo sarebbe necessario iscriversi per seguire (che noia!), ma io trovo i video sempre su Veoh, questa volta pubblicati da Trunks02SSJ.

« altri articoli

Feed anche per la Star Comics

Scritto il 4 Aprile 2008
Nella categoria Fumetti, PHP, Produzioni Proprie | 1 commento
Tag: , , ,

Grazie ad una amica (Federica) mi sono mosso e oggi ho sistemato finalmente il feed per la Star Comics, casa editrice che ammetto di seguire poco.

Già che c’ero ho migliorato gli altri feed e creato una pagina per tutti i Feed per i fumetti.

Feed Star Comics

« altri articoli

VLC Player (o Totem) producono schermo nero con Compiz-Fusion

Scritto il 4 Aprile 2008
Nella categoria GNU/Linux, Guide | Scrivi un commento
Tag: , , , , ,

Dopo un lungo periodo, finalmente mi sono deciso a tenere sulla mia macchina Ubuntu sempre attivo Compiz-Funzion, e non solo per fare il gallo con i miei amici; ma per renderlo usabile ho dovuto sudare un pochetto, perché quando riproducevo un video, VLC Player (o anche Totem) mi riproduce solo una schermata nera, che mostra il vero filmato solo mentre spostavo.

Schermata eloquente di VLC Player

Finalmente, dopo tanto tempo, sono riuscito a risolvere, la soluzione in effetti era proprio sul wiki ufficiale, la traduco qui in italiano per convenienza:

VLC Player

Eseguire VLC Player, dal menu Impostazioni scegliere Preferenze… Nella finestra appena apparsa, aprire la sezione Video cliccando sul triangolino appena a sinistra, nella barra di sinistra, selezionare Moduli di uscita, qui abilitare la spunta Opzioni Avanzate in basso a sinistra, ora scegliere come Modulo di uscita video la voce “uscita video X11“. Cliccare su “Registra“, chiudere VLC e riaprire un video.

Se ancora non si vede oppure VLC si chiude da solo, riaprire lo stessa finestra, quindi espandere Moduli di uscita, selezionare X11, quindi togliere la spunta da Utilizza memoria condivisa (se la voce non si vede, è perché bisogna sempre abilitare le Opzioni Avanzate).

Totem

Dal terminale o dopo aver premuto ALT+F2, eseguire il comando “gstreamer-properties“, quindi nella sezione Video selezionare come plugin la voce “X Window System (senza Xv)“. Chiudere quindi eseguire Totem.

Onestamente le performance non saranno le stesse, io vedo peggio di prima, ma sicuramente è meglio di niente ;)

« altri articoli

Aggiornato a WordPress 2.5 con mini-guida

Scritto il 30 Marzo 2008
Nella categoria Blog e blogsfera, Guide | 2 commenti
Tag: , , , ,

Visto il successo dell’articolo sul precedente aggiornamento di WordPress a 2.3 e vista la novità, ripeto passando alla versione 2.5.

Preparazione

Come sempre, ho fatto un bel backup della tabella con phpMyAdmin, ho salvato tutta la cartella /blog/ in locale e già che ci sono l’ho zippata tutta in un solo colpo e salvata (TopHost mi ha messo a disposizione anche il salvataggio di una directory in un colpo solo, perché non approfittarne?).

Altro passaggio obbligato, disattivo (con un solo click) tutti i plugin.

Fatto questo, ho estratto tutti i file di aggiornamento in una cartella VUOTA (così da evitare problemi di scelta se sovrascrivere o meno), già che c’ero ho scaricato il file di localizzazione Italiana e ho estratto il file it_IT.mo nella cartella /wp-content/languages (che con mio disappunto ho dovuto creare).

Aggiornamento

Con la nuova tecnica della directory vuota, durante il trasferimento via FTP dei nuovi file ho potuto specificare “sostituisci tutto” con la certezza di non fare danni.

Una volta terminato il lavoro di aggiornamento dei file, entro nella bacheca di amministrazione, mi viene proposto il solito aggiornamento del database, proseguo cliccando fino a che il tutto è finito. Il mio nuovo Wordpress 2.5 è pronto!

Bacheca di Wordpress 2.5

Mi tocca solo riattivare tutti i plugin, mi sono person un attimo con la nuova bacheca, molto più funzionale di prima, sotto riporta anche, ad esempio, le statistiche prese dal plugin Wordpress.com Stats non appena aggiornato. Ho cerchiato nell’immagino dove andare a cliccare.

Nessun plugin tra quelli installati (Akismet, All in One SEO Pack, EmbedIt, FeedBurner FeedSmith, Google XML Sitemaps, OneClick Installer, Reinvigorate, Simple Tags, WordPress.com Stats) mi ha dato problemi: OneClick potrebbe essere superato perché la nuova versione di Wordpress promette di aggiornare con un click i plugin, ma a me non è riuscito, forse per un problema di permessi; anche Simple Tags potrebbe essere diventato parzialmente inutile, io lo tengo più che altro per fare il “related post” che Wordpress ancora non fa, purtroppo non funziona più il suggerimento dei tag durante la scrittura, spero venga sistemato; infine FeedBurner FeedSmith è segnalato come non funzionante, ma a me ancora funziona, bah!

Sulla strada

A parte i commenti qui sopra sui plugin, in resto mi sembra… uguale al precedente, chiaramente le novità verranno fuori con l’utilizzo. La bacheca ed in generale l’aggiornamento della grafica lato admin rendono Wordpress sicuramente più semplice da utilizzare, è più ergonomico, ma la grafica in sé non mi piace per niente, sarà che mi ero ormai abituato a quello precedente.

L’editor incluso sembra in effetti più stabile e usabile, io ci ho sempre litigato e a tratti ho usato solo l’editor HTML perché questo mi faceva impazzire il codice, inoltre inserire Immagini con upload sembra essere meglio. Ma i popup risultano tutti fuori dimensioni, non so se anche in inglese succede.

L’anteprima sembra più carina, grazie al salvataggio automatico (probabilmente forzato) e al pulsante più visibile; in generale tutta la gestione dell’articolo sembra migliorata.

Le altre novità annunciate, o non mi sono utili, o sono impossibili da verificare.

Per concludere l’aggiornamento è andato liscio, tranquillo, per niente problematico e quindi è consigliato (del resto come tutti gli aggiornamenti).

« altri articoli