Come integrare Sass in Sublime Text su Windows

image

LESS o Sass? La scelta è ardua, in web le opinioni sono contrastanti e, sostanzialmente, anche se le differenze ci sono, questa dualità sembra più che altro una forte guerra di religione, in stile Torvalds-Tanenbaum sui kernel dei sistemi operativi. Ma se abbiamo già pubblicato una guida sul come installare LESS su Windows, con tanto di integrazione con Sublime Text 2, che ne è di Sass? Ecco quindi come installare Sass su Windows ed integrarlo su Sublime Text 2:

1. Installare Ruby scaricando l’installer da qui (mi raccomando, selezionare l’opzione che aggiunge ruby ai “PATH” di Windows, oppure aggiungerli manualmente);
2. Aprire una cartella qualunque, cliccare sulla barre degli indirizzi in alto e digitare il percorso “C:\Windows\System32“;
3. Trovare il file “cmd.exe“, cliccare su di esso con il tasto destro e scegliere “Esegui come amministratore” dal menù contestuale;
4. Localizzarsi con il comando “cd” sulla cartella “bin” contenuta all’interno della directory madre di Ruby (solitamente, il percorso è simile a “C:\Ruby193\bin“);
5. Digitare il comando “gem install sass” per installare Sass;
6. Digitare il comando “gem install compass” per installare Compass;

7. Scaricare ed installare il “Sublime Package Control” per Sublime Text (leggere questa pagina);
8. Scaricare la sintassi per Sass (CTRL+Shift+P, scrivere “install”, premere invio da tastiera, digitare scss e installare il plugin per la sintassi);

9. Creare all’interno della cartella “User” di Sublime Text (il percorso è simile a “C:\Program Files (x86)\Sublime Text 2\Data\Packages\User”) una nuova cartella con nome “Sass” (o qualcosa di simile);

10. Scaricare i file per il “Build System” di Sublime Text da qui e copiare i file “Sass.sublime-build” e “Sass Minify.sublime-build” all’interno della cartella appena creata al passaggio #7;

11. Riavviare Sublime Text;

Finito! Adesso avremo due sistemi per compilare i file “*.scss“: con il sistema “Sass” il css prodotto avrà una forma estesa e leggibile, mentre con il “Sass Minify” il css sarà compresso per bene. Entrambi li troviamo in “Tools” -> “Build Systems.

Come installare CoffeeScript in Windows con Sublime Text

image

Più passa il tempo, più CoffeeScript arruola seguaci e amanti della “sugar syntax” per Javascript. A conferma di ciò, è il fatto che la principale pecca, a detta di molti programmatori e web designer, è proprio la sintassi di Javascript, pomposa in quasi tutti gli aspetti (“;” alla fine di quasi tutte le istruzioni, parentesi graffe “{}” in ogni dove) e che provoca istruzioni lunghe e talvolta poco leggibili anche solo per iterare un semplice array.

Capire quindi perché CoffeeScript sta riscuotendo un buon successo, non è difficile. Ciò che può risultare difficile inizialmente, nonostante la presenza di tanta documentazione sparsa per il web, è capire come installare CoffeeScript per usarlo in Windows ed in particolare usando l’editor di sviluppo Sublime Text.
Il metodo certamente più semplice, è quello di usare il celeberrimo framework node.js ed il plugin per CoffeeScript. Ma svisceriamo i passaggi uno per uno:

1. Installare node.js;
2. Scrivere sul terminale/command prompt di node.js il comando:
npm install -g coffee-script
3. Aggiungere ai path assoluti (ecco una guida) il percorso:
C:\Program Files (x86)\nodejs\node_modules\
4. Scaricare ed installare il “Sublime Package Control” (leggere questa pagina);
5. Scaricare la sintassi per Coffeescript (CTRL+Shift+P, scrivere “install”, premere invio da tastiera, digitare coffeescript e installare il plugin per la sintassi);
6. Andare in “Preferences…” -> “Browse Packages…“, aprire la cartella “CoffeeScript\Commands“;
7. Aprire il file “CoffeeScript.sublime-build” e modifica le righe originali con le seguenti:
{
“cmd”: [“coffee.cmd”,”-c”,”$file”],
“file_regex”: “^(…*?):([0-9]*):?([0-9]*)”,
“selector”: “source.coffee”
}

8. Creare un coffeescript per testare il funzionamento, ad esempio il codice:
console.log “Hello world!”
9. Salvare il file con l’estensione “*.coffee“, quindi pigiare da tastiera la combinazione CTRL+B;
10. Dovremmo trovare nella stessa cartella in cui si trova il file “*.coffee” il file “*.js” compilato.

Finito! In caso di errori, consiglio di riavviare Sublime Text e assicurarsi di aver ben digitato il “PATH”, prestando attenzione ai “;” fra una istruzione e l’altra.

Come installare ed usare YUI Compressor in Sublime Text su Windows

Anche se non aggiornato da qualche tempo, YUI Compressor rimane uno strumento molto utile per comprimere in maniera efficace e rapida il nostro codice JavaScript o CSS. Usando poi la versione scritta in Java, è possibile integrarlo in pochi passaggi con il noto editor di sviluppo Sublime Text 2. Ecco come installare YUI Compressor in Sublime Text:

1. Scaricare ed installare il “Sublime Package Control” (leggere questa pagina); 2. Creare all’interno della cartella “User” di Sublime Text (in Windows, il percorso è simile a “C:\Program Files (x86)\Sublime Text 2\Data\Packages\User“) una nuova cartella con nome “YUI Compressor“;
3. Scaricare da qui l’ultima versione disponibile di YUI Compressor, decomprimere il pacchetto e quindi aprire la cartella “Build” al suo interno;
4. Spostare/copiare il file “*.jar” appena scaricato nella cartella creata al passaggio #2;
5. Aprire Sublime Text e apre il menù “Tools” -> “Build System…” -> “New Build Systems…“;
6. Aggiungere il codice riportato di seguito:

{
“cmd”: [“java”, “-jar”, “${packages}\\User\\YUI Compressor\\yuicompressor-2.4.8pre.jar”, “$file”, “-o”, “${file_base_name}.min.${file_extension}”, “–charset”, “utf-8”],
“selector”: “source.js”
}

7. Salvare il file come “YUI Compressor.sublime-build” (mi raccomando, specificare il formato per evitare di incorrere in problemi);
8. Riavviare Sublime Text;
9. Aprire un file CSS o JavaScript, selezionare “YUI Compressor” da “Tools” -> “Build Systems“;
10 Pigiare da tastiera la combinazione “CTRL+B” e appare la console di Sublime Text, con il risultato della compressione.

Et voilà! Il gioco è fatto. Nella medesima directory in cui si trovava il file CSS o Javascript troveremo la sua versione “minimizzata“ e ribattezzata per l’occasione “nome_file.min.formato“.

Come integrare Google Closure in Sublime Text su Windows

image

Uno dei “JavaScript optimizer” più utilizzati ultimamente da noi web developer è certamente Google Closure. Un po’ perché prima della parola “Closure” c’è “Google“, un po’ tanto perché fa il suo lavoro davvero bene, evidenziando persino problemi di sintassi grazie al suo essere anche un linter. Ma come integrarlo in Sublime Text installato in ambiente Windows? Poiché Google Closure è scritto in Java, basta creare il nostro “Build System“. Ecco come:

1. Scaricare ed installare Java JRE;

2. Scaricare Google Closure ed estrarre dal pacchetto compresso il file “*.jar”;

3. Creare all’interno della cartella “User” di Sublime Text (il percorso è simile a “C:\Program Files (x86)\Sublime Text 2\Data\Packages\User”) una nuova cartella con nome “Google Closure”;

4. Copiare/Spostare il file “*.jar” scaricato al passagio #2 all’interno della cartella appena creata al passaggio #3;

5. Scaricare i file per il “Build System” di Sublime Text da qui, dunque copiare il file “Google Closure.sublime-build” all’interno della cartella “User” di Sublime Text;

6. Riavviare Sublime Text;

7. Selezionare “Google Closure” da “Tools” -> “Build Systems“;
8. Creare o aprire codice JavaScript e salvarlo con il formato “*.js“, quindi pigiare da tastiera la combinazione CTRL+B;
9. Dovremmo trovare nella stessa cartella in cui si trova il file “*.js” un altro “*.js” compresso per bene.

10. Finito!

In caso di errori o se non troviamo nulla, verificare di aver salvato il file o di averlo scritto correttamente.

Come far smettere Windows 8 dal chiedere la password quando si compra una app

Lo store di Windows richiede la password prima ancora dell’acquisto. Il fatto che venga poi richiesta ulteriormente, fornisce certamente un maggior grado di sicurezza. Ma, se questa funzione è utile quando il computer è utilizzato da più utenti, in molti altri casi immettere nuovamente la password è fastidioso, soprattutto quando il PC è quello personale. Seguendo questi passaggi, è possibile disabilitare questa richiesta:

1. Accedere all'”App Store” dalla schermata iniziale;
2. Non appena l’App Store è stato caricato correttamente, premere da tastiera la combinazione “Win+I” per aprire la pagina “Impostazioni” dell’app. Dalla lista, scegliere l’opzione “Il tuo profilo“;
3. Nella schermata account, trovare l’opzione “Chiedi sempre la password quando compri una app“;
4. Ora è richiesto di confermare questa decisione. Basta inserire la vostra password di sistema nel campo e premere “OK”;
5. Finito!

Adesso, non sarà più richiesto digitare la propria password per l’acquisto di una app dal Windows Store.