Linux Microsoft Code NodeJs e Google Starterkit - Introduzione

Prefazione

Sentire parlare di starterkit mi ricorda gli inizi della mia carriera lavorativa. quando giocavo con gli asp.net starterkit per creare i miei primi siti web interattivi.
Da qualche giorno c'è stato un restiling della sezione Google developers. Sotto la voce web, troviamo in beta un nuovo starter kit. Ma di cosa si tratta?

In poche parole, questo starterkit, è un punto di partenza per far vedere come sia possibile visualizzare web application compatibili su tutti i device, dagli smartphone alle tv, garantendo alte performance in termini di leggerezza, responsività e velocità di caricamento. Inoltre è possibile sincronizzare in realtime layout e dati su diversi device e tenere traccia delle metrice di performance, mobile e desktop.

Iniziamo

Lo starterkit è basato sui seguenti componenti:

NodeJs: Possiamo definirlo un framework che permette l'utilizzo server-side di Javascript.
Npm: E' per Node cio che NuGet è per .Net, e cioè un package manager, che permette di produrre e consumare pacchetti di software (addin, frameworks, ecc..)
Sass: Syntactically Awesome Style Sheets, un preprocessore CSS serve a definire fogli di stile con una forma più semplice, completa e potente rispetto ai CSS e a generare file CSS ottimizzati, aggregando le strutture definite anche in modo complesso.

Controlliamo che node sia installato correttamente, da terminal digitate:

node -v

Se non siete all’ultima versione potete aggiornare il tutto tramite Npm con i seguenti comandi:

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Setup del Google starterkit

Per prima cosa scaricare lo starterkit da qui: download
Decomprimete i file in una nuova cartella ed aggiungervi il componente Glup tramite Npm:

cd my-project
npm install #(mi raccomando è un processo lungo, abbiate pazienza...)
npm install gulp -g

Ora per fare una prova lanciamo il server locale tramite il comando

gulp serve #(si apre il browser Chrome, premte Ctrl-R per attivare reload automatico)

Installare Code

A questo punto abbiamo bisogno di un editor. Google ci consiglia Sublime, ma io ho optato per Microsoft Code perchè mi piace l'idea di vedere girare sotto Linux cose Microsoft e per imparare ad usarlo.

Scaricate Code al seguente indirizzo web: download

Seguite le istruzioni di installazione qui: istruzioni setup

Se volete fare l’update, su windows è abilitato di defaut, su MAC lo includeranno ma non sarà automatico, su Linux non è previsto (anche se nel menu lo ho trovato ma non fa niente), quindi dobbiamo verificare ogni tanto e farlo da soli.

Su Linux mi raccomando di estrarre i file dallo zip, con il comando: unzip VSCode-linux-x64.zip -d /home/rudy/Develop/VSCode
se usate un gestore d’archivi grafico vi può dare errori strani.

Funzionalità

Per compilare il nostro progetto Code supporta Glup (che possiamo definire un compressore di html, javascript, css ed immagini. Unisce più file assieme e rimuove le parti superflue che non incidono sul normale funzionamento).

Connessione di device fisici

Per connettere i nostri device (nel mio caso Nexus 5 e Nexus 9) per prima cosa abilitiamo il debug USB (link ad abilitazione) e colleghiamoli al PC tramite USB.
Apriamo il browser al seguente URL: chrome://inspect
Ed abilitiamo il port forwarding.

Debug dei device in realtime
Ogni device ha il suo modo per eseguire il debug.

Con Android

utilizziamo i Chrome DevTools che possiamo impostare al seguente indirizzo: chrome://inspect per impostare il tuo device leggi qui: debug setup

Con Safari for iOS

Apri Safari su tuo device iOS.
Connettilo via USB.
Apri Safari sul tuo PC.
Nel menu di Safari’s menu vai su Develop e seleziona il nome del tuo dispositivo.
Seleziona quale tab vuoi debuggare.

Con IE Windows Phone

Al momento non esiste un supporto al debug nativo, ma si può emulare il browser mobile sul desktop con IE 11, vedi qui: win emulator

Debug Nexus 5 e Nexus 9 in realtime

Per prima cosa collego i 2 device alle porte USB del PC e vado all’indirizzo: chrome://inspect su Google Chrome

Otteniamo l’indirizzo ip del PC, nel caso Linux tramite riga di comando “ifconfig”, con windows “ipconfig”.

Sui device apriamo il browser Chrome all’indirizzo ip del PC ottenuto precedentemente e ci colleghiamo alla porta del server Gulp: x.y.z.n:3000 (Es.: 192.168.1.2:3000)

Dal PC all’indirizzo chrome://inspect, vediamo comparire i device collegati e a quale URL.

Editing con Code in realtime

A questo punto da linea di comando raggiungiamo la cartella dello starter kit ed apriamo Code con il comando: “code .”
Clicchiamo sul menu “File” ed abilitiamo il flag “Enable autosave”.

A questo punto possiamo modificare il codice sorgente del programma e vedere in realtime il cambiamento. Inoltre scrollando e navigando sui vari link, da uno device collegati al PC (o dal PC stesso), tutti gli altri lo seguiranno (questo è possibile tramite la funzionalità “browsersync”).

Libri gratis per programmatori

Qui, trovate i libri della rivista IO Programmo, degli ultimi 2,3 anni, formato PDF: “Libri di programmazione gratis”, c'è un po’di tutto per .NET, Java, C++, Python, SQL Server.

Filtrare i tipi di files di HTML file input

Con le specifiche HTML 4.01 è stato definito un attributo chiamato accept per i tag di tipo input type="file".

Questo attributo è usato per specificare un lista di contenuti (MIME types) separata da virgola che il server può processare correttamente quando gli viene inviato il form (che contiene il tag input). Ad esempio se si vuole indicare che i tipi validi da passare al server sono solo immagini gif o jpeg aggiungiamo l'attributo accept="image/gif,image/jpeg" al tag input.

E'supportato anche l'uso delle wildcards, ciò significa che per indicare ad esempio tutti i files di tipo immagine posso scrivere "image/*" (anche se questa sintassi non esprime un tipo MIME valido) .

I browsers posso usare questa informazione per filtrare i tipi di files accettati. Sfortunatamente sembra che il supporto attuale dei browsers sia inesistente, nessun filtro viene applicato anche se specificato .

L'unico modo per dare un po' di conforto agli utenti è usare javascript lato client. Ad esempio, se volessimo fare si che un utente debba specificare per forza un file di tipo JPEG potremmo scrivere:

<SCRIPT language=JavaScript type=text/javascript><!--

function Controlla(testoVuoto)
{
 var ext = document.frm.immagine.value;
 if(ext.length != 0)
 {
  ext = ext.substring(ext.length-3,ext.length);
  ext = ext.toLowerCase();
  if(ext != 'jpg')
  {
   alert('Hai selezionato un file .'+ ext +
   ' ma sono accettati solo i file .jpg!');
   return false;
  }
 }
 else if(testoVuoto)
 {
  alert('Seleziona un file .jpg!');
  return false;
 }

 return true;
}

//--></SCRIPT>
<FORM name=frm onsubmit="return Controlla(true);" 

action=http://www.visual-basic.it/Upload.aspx method=post encType=multipart/form-data>

<P>Seleziona un file JPEG (.jpg) da caricare:</P>
<BR>
<INPUT type=file accept=image/jpeg size=50 name=immagine>
<P>Includi anche una breve descrizione:</P>
<BR>
<TEXTAREA onfocus=Controlla(false); name=txtDesc rows=3 cols=40></TEXTAREA>
<INPUT type=submit value=Manda>
</FORM>