La minificazione per ottimizzare le pagine web

Cos’è la minificazione?
Si tratta di un processo per ridurre la dimensione di un codice sorgente rimuovendo da esso elementi inutili al compilatore (tipo le tabulazioni per indentare il codice, commenti, e altri elementi a seconda del linguaggio considerato) ma magari utili al programmatore durante la fase di produzione del codice.
Questo processo riduce quindi le dimensione del file sorgente, e in ambito web è una cosa piuttosto utile, poichè meno è pesante un file da inviare al browser, meno tempo la pagina ci metterà a caricarsi.
La minificazione di solito si fa quindi con script Javascript o fogli CSS, raramente con HTML, poichè questi file vengono inviati direttamente al browser.

Minificazione in pratica
Un ottimo tool per la minificazione di Javascript e CSS è YUI Compressor (qui un’implementazione online).
Per minificare il codice YUI Compressor sfrutta diverse particolarità di Javascript e CSS.
Per quanto riguarda Javascript, applica una serie di piccole ottimizzazioni sostituendo certe sintassi con altre più stringate (es. object[“property”] diventa object.property, risparmiando 3 bytes), e inoltre sostituisce i nomi delle variabili con altri più corti, ma che non cambiano l’esecuzione del programma.
Ad esempio:

function prova(primo_argomento, secondo_argomento) {
    return primo_argomento + secondo_argomento;
}

Diventa:

function prova(a,b){return a+b;}

Che è assolutamente equivalente, ma molto più corta.
Per migliorare ulteriormente l’utilizzo di questo minificatore, vi consiglio la lettura di questo articolo su A List Apart (un sito da adorare, dove scrivono grandissimi programmatori di tutto il mondo), scritto proprio dall’ingegnere di YAHOO! che ha inventato YUI Compressor. Descrive semplici regole da usare per rendere il compito più facile al compressore, oltre ad altre buon tecniche di scrittura del codice per diminuire le dimensioni dei sorgenti che il compressore non può applicare.
In quanto ai CSS, YUI Compressor oltre a rimuovere totalmente spazi (tranne dalle dichiarazioni dei selettori) e commenti, esprime i colori nella forma più breve possibile. Ad esempio #FFFFFF, il bianco, diventa #FFF, oppure rgb(10, 10, 10) diventa #AAA.

Il PHP, come spiegato diversi post fa, invece, è interpretato lato server, quindi prima viene eseguito, poi viene inviato il suo output sottoforma di HTML al browser, che non vedrà assolutamente la differenza tra una pagina .php e una .html
Quindi, perchè minificare uno script PHP?
Intanto, si risparmia spazio sul server, e poi non dimentichiamoci che PHP, normalmente, viene compilato in bytecode ad ogni chiamata dello script, e quindi minore è la dimensione del file, minore sarà il tempo di swap su disco e di parsing del codice.
Script molto voluminosi possono essere formati in buona percentuale da spazi e tabulazioni piuttosto che dal codice vero e proprio. Più che gli script che si si scrivono da soli, è utile minificare librerie esterne, che spesso sono largamente commentate. Magari durante la fase di sviluppo la si tiene “normale” e la si minifica solo quando si è finito di lavorarci e la si carica sul server.
Per farlo, dobbiamo usare la direttiva -w chiamando php.exe, e specificando come secondo argomento il percorso del file da minificare.
Tradotto in pratica (qui la procedura per farlo su Windows), ci serve un interprete PHP installato sul proprio PC, con Wamp Server, Xampp, Lamp, EasyPHP o affini.
Cercate nelle cartelle dell’interprete fino a trovare il programma php.exe, quindi aprite blocco note e scrivete:

php.exe -w "C:\pippo\script_lungo.php" > "C:\pippo\script_minificato.php"

E salvatelo come minify.bat nella cartella dove avete trovato php.exe. Quindi apritelo facendoci doppio click sopra e.. volià! Troverete nella cartella pippo il vostro script minificato script_minificato.php

PHP e AJAX: come gestire le lettere accentate

Sto sviluppando un sito (un gran bel sito u.u) nel quale faccio una richiesta asincrona tramite AJAX a uno script PHP, il quale mi restituisce del codice HTML.
Ma se devo visualizzare delle lettere accentate… viene un gran guazzabuglio di strane à e simboli esoterici del genere che sembra che stia scrivendo in lappone.

A cosa è dovuto questo problema?
Alla codifica dei caratteri, o meglio al charset impostato per la pagina.
Il charset è l’insieme dei caratteri che scelgo di far visualizzare al browser. In base a questa informazione, il browser codifica la richiesta e trasforma quindi i byte nei caratteri corrispondenti.
Il charset più comune è l’ASCII, che prevede 128 caratteri, tra numeri, lettere, simboli e cartteri di utilità (tipo il carattere di new line). Tuttavia non rappresenta tutti i caratteri che esistono, considerando le centinaia di lettere diverse che ci sono in lingue orientali o anche solo in quelle nordiche o germaniche.
Pe rappresentare anche questi caratteri quindi si usa un charset chiamato ISO-8859-1, Latin 1 per gli amici, che prevede 256 simboli e comprende tutte le lettere “strane” degli alfabeti europei, oltre a qualche altro simbolo tipo lo ¥ o l’€.

Per impostare il charset della propria pagina web ci sono due modi:

  • Tramite un tag <meta> nell’head della pagina
  • Impostado l’header della richiesta HTTP

La prima opzione è indicata specialmente per pagine statiche o per script che producono un’intera pagina, mentre la seconda è l’ideale per script che producono un output per una richiesta AJAX, e quindi non possono inserire tag nell’head della pagina.

Quindi, per visualizzare correttamente i caratteri accentati, nella pagina principale che esegue la richiesta AJAX imposteremo il charset a ISO-8859-1 inserendo nell’head:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
Mentre nella pagina PHP richiamata con AJAX imposteremo il charset nell’altro modo, ossia:
header("Content-type: text/html; charset=ISO-8859-1");
Ricordandoci che è possibile utilizzare la funzione header() solo prima di aver generato qualsiasi output con echo, print o simili, o verrà generato un errore.

Nello script AJAX sarà importante ricordarsi di codificare e decodificare i dati (siano essi GET o POST) inviati allo script con le funzioni encodeURIComponent e decodeURIComponent

data = encodeURIComponent("dati da inviare");
//...
//invio dei dati con AJAX
//...
document.getElementById("contenitore").appendChild(decodeURIComponent(response));

Ma siccome queste funzioni codificano l’output con il charset UTF-8, nello script PHP dovrò usare una funzione strategica: utf8_decode().
Passando i valori inviati in questa funzione, riconverto il tutto in ISO-8859-1, senza quindi vaere strane sorprese.

Dimenticavo:
Nel caso i dati vengano memorizzati in un database, anch’esso dovrà essere impostato con il charset Latin 1 (ISO-8859-1).
In poche parole, pagina, script e database devono avere lo stesso charset, qualunque esso sia.

Spero di essere stato utile, visto che il problema mi ha dato non poche grane…

Rimuovere elementi contigui uguali in un array con VB.NET

Piccolo snippet tanto per

Dim n As Integer = 0
Dim lista_vettore As List(Of Integer) = {1, 2, 3, 4, 5, 6, 6, 7, 6, 8, 8, 9}.ToList
Do Until lista_vettore.Count = 0 Or n = lista_vettore.Count
     If lista_vettore(n) = lista_ vettore(n+1) Then
          lista_vettore.RemoveAt(n)
     End If
     n += 1
Loop
'lista_vettore sarà ora:
'{1, 2, 3, 4, 5, 6, 7, 6, 8, 9}