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

Errore con la proprietà CSS sconosciuta: filter, opacity e trasparenza

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

In molti siti mi è capitato di vedere, grazie a Firebug ma anche nella console degli errori, un errore ricorrente, la scritta:

Proprieta filter

Si tratta di una proprietà CSS gestita solo da Internet Explorer, documentata su MSDN, che Firefox non riesce ad interpretare perché non standard ma esclusiva del browser di casa Microsoft.

Solitamente viene utilizzata dai siti per creare delle trasparenze, specificando come filtro l’opacità, ma anche qui siamo fuori standard. La modalità corretta per impostare una opacità (che in pratica sarebbe una trasparenza) è la proprietà opacity, come specificato dal CSS3.

Testo Normale
Questo è trasparente
Un po’ meno

Fonte dell’immagine jmcarthy99

In questo box sopra alcune scritte sono trasparenti praticamente per tutti i browser moderni: Firefox 2 (e 3), Opera 9 e Safari (da 1.3), rimane escluso Internet Explorer (non ho provato la 8, ma sembra di no) ed è quindi il metodo giusto di fare le cose.

Riassunto:

Standard: opacity: 0.6;

Internet Explorer: filter: alpha(opacity=60);

« altri articoli

Trovare (e ripulire) i duplicati in mySQL e spostare tabelle

Scritto il 13 Maggio 2008
Nella categoria Produzioni Proprie | Scrivi un commento
Tag: , ,

Oggi mi è capitato di voler spostare una tabella da un database ad un altro, entrambi sullo stesso server, perché una parte del progetto si è ingrandita e ora merita uno spazio tutto suo. Ovviamente la soluzione più semplice è esportare ed importare, ma oltre ad essere poco elegante, diventa lunga nel caso di una tabella con molti dati.

Database su foglio di calcolo

La soluzione più semplice è utilizzare la sintassi INSERT INTO, come nell’esempio

INSERT INTO `destinazione`.`dati`
SELECT *
FROM `origine`.`dati` ;

Questo copia la tabella dati dalla tabella origine a  destinazione. Volendo è possibile anche rinominare la tabella specificando due nomi diversi, oppure copiare solo alcune colonne della tabella. Molto importante, la tabella di destinazione deve essere già stata creata, con tutte le colonne e le chiavi necessarie.

Gestire invece i valori duplicati in una tabella è una cosa molto complessa, prima di tutto è necessario identificarli, la sintassi è questa:

SELECT nome, COUNT( nome ) AS totale FROM dati GROUP BY nome HAVING totale >1;

Questo identificherà tutti i nomi doppi nella dabella, solo quelli doppi, per vedere invece i valori distinti, cioè ogni singolo valore che appare, più semplicemente basta

SELECT nome, COUNT( nome ) AS totale FROM dati GROUP BY nome;

Se neanche interessa sapere quante volte appaiono, allora la query si riduce a

SELECT nome FROM dati GROUP BY nome;

Ora, eliminarli non è una cosa semplice, perché è difficile capire quali vanno tenuti e quali no, insomma non è un’azione da fare a cuor leggero e va sempre studiata. La soluzione più corretta è introdurre un vincolo di unicità sulla tabella, o come chiave o come valore unico.

ALTER INGORE TABLE `dati` ADD UNIQUE KEY ( `nome` , `numero` )

Questo comando di alterazione, aggiunge un vincolo di unicità della coppia nome,numero la clausola IGNORE permette di ignorare l’errore di duplicazione, senza la query non avrebbe successo in una tabella che non rispetta il vincolo. Non si hanno però certezze di quali altri dati vengano mantenuti.

Se l’obbiettivo è fare una pulizia assennata, il mio consiglio è procedere per passi, (prima di tutto lavorando su un backup e non dal vivo), quindi pulendo i valori doppi con la query di cui sopra, infine aggiornando i rimanenti dati dalla tabella originale.

« 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