Ormai capita molto spesso che per necessità o per supporto ci sia il bisogno di condividere dei blocchi di codice, se hai frequentato molti forum negli anni passati, fa sono sicuro che ti sarai trovato a utilizzare i servizi che prendono il nome di PasteBin.
Dico che prendono il nome perché PasteBin era semplicemente uno dei servizi più famosi e utilizzati con i quali era possibile incollare il blocco di codice che ci dava problemi e condividerlo con i nostri amici e colleghi nella speranza di trovare una soluzione.
Allo stesso tempo, sulla falsa riga di questo, sono nati decine di altri servizi che ci permettono di fare la stessa cosa e il mio scopo non è tanto quello di elencarli tutti ma piuttosto quello di metterti in luce quali sono le mie preferenze personali che usiamo quotidianamente con i nostri skillati.
Che cosa cercare all’interno di un PasteBin
Continuerò a usare questa similitudine per il resto dell’articolo, pur non riferendomi soltanto a PasteBin sento il bisogno di poter identificare con questo termine questi servizi al posto di utilizzare definizioni come “servizi online che permettono di condividere il codice” anche perché, come presto scoprirai, molti di questi sono in grado di fare molto di più…
Dal mio personale punto di vista, quello che bisogna cercare in un servizio del genere è sicuramente la possibilità di avere una buona syntax highlight, ovvero che a colpo d’occhio sia possibile comprendere quale sia una variabile, quale sia la dichiarazione di una funzione e via dicendo.
Oltre a questo una caratteristica utile, ma non essenziale, è rappresentata dalla possibilità di creare delle snippet private che soltanto noi o le persone alle quali abbiamo passato il link siano in grado di potervi accedere.
Questo perché molto spesso capita di lavorare su un codice che non vogliamo rilasciare o che non vogliamo rendere pubblico ma allo stesso tempo abbiamo la necessità che un collega osservi il la nostra realizzazione e che ci faccia capire dove le cose stanno andando male.
Ma il syntax highlighting e la possibilità di creare delle snippet di codice private non sono le uniche caratteristiche che dovrebbero interessare uno sviluppatore, dal mio punto di vista una cosa molto importante è rappresentata anche dalla possibilità di creare un account.
So già quello che stai pensando: un altro account?!?
Ebbene sì, un nuovo account può essere incredibilmente utile per poter avere uno storico che ci permette di gestire le vecchie snippet condivise e anche imparare dai nostri precedenti errori!
Uno sviluppatore dovrebbe sempre puntare alla propria crescita, soprattutto imparando dagli errori passati.
Alcune delle soluzioni che ti presenterò quest’oggi rispondono alle specifiche che ti ho appena evidenziato mentre molte altre presentano delle caratteristiche che sto tenendo da parte per offrirti qualche colpo di scena.
Gists, un repository per i blocchi di codice
Iniziamo quindi con la carrellata di web app che ti voglio consigliare e che ti permetteranno di rendere più semplice e (talvolta) veloce il tuo lavoro.
La comodità di questa prima soluzione deriva dal fatto che ti permette di sfruttare il tuo account Github senza dover perdere tempo a crearne uno nuovo e avere una nuova password da ricordare. Per iniziare a lavorare con questa soluzione non devi far altro che andare su http://gist.github.com/ e inserire le tue credenziali e il gioco è fatto!
Una volta effettuato il login il sito non fa altro che aspettare un tuo input, l’interfaccia è incredibilmente pulita e la colorazione della sintassi viene applicata automaticamente in base all’estensione del file che stiamo aggiungendo.
Oltre a questo è possibile aggiungere una descrizione, all’interno della quale poter descrivere meglio le funzionalità e i problemi che stiamo riscontrando.
Ovviamente con queste feature non si nota niente di importante che possa posizionare Gist in maggior luce rispetto alle decine di competitor che si trovano sul mercato, ma allora perché te ne sto parlando?
Beh una caratteristica che mi ha sicuramente avvicinato all’utilizzo di questa soluzione è la sua unica capacità di poter inserire un maggior numero di file all’interno di un singolo Gist! Sì hai capito bene, la prossima volta che lavori sulla creazione di una finestra modale, giusto per fare un esempio, e hai bisogno di chiedere aiuto non dovrai più creare dei pastebin separati!
Personalmente, oltre al fatto che questo progetto è mantenuto da GitHub, questa è stata la prima caratteristica che mi ha veramente incuriosito.
Condividendo un singolo link oggi possono passare al mio collega il codice HTML, CSS e JavaScript che mi sta facendo tanto ammattire in modo tale che, senza la necessità di aprire più finestre del browser, possa controllare con un singolo colpo d’occhio tutto il codice che viene utilizzato dalla mia applicazione.
Molto probabilmente a te non sembra una gran cosa, ma io la trovo incredibilmente utile anche per separare i blocchi di codice che utilizziamo a lezione. Un unico Gist mi permette di organizzare il codice di ciascuna lezione senza dover diventare matto, l’unica cosa importante è curare il nome e la descrizione in modo che sia più semplice reperire i codici adeguati.
Parliamo anche della buona integrazione che questo servizio ha con altri come per esempio la nostra amata piattaforma WordPress. Gist integra nel suo codice la soluzione oEmbed, per dirla facilmente quella che permette l’embed di un determinato elemento incollando semplicemente la URL della risorsa.
Basta infatti installare un plugin come oEmbed Gist che avremo l’opportunità di inserire sia tutto il codice presente all’interno di una raccolta che ogni singolo blocco di codice, una vera comodità visto che oggi mi trovo ancora a fare i classici copia incolla con un pesante plugin come Crayon.
Non mi fraintendere, al sottoscritto piace Crayon come soluzione, ma quando mi sono trovato a confrontare il peso di questo (2,3MB) e confrontarlo con quello che ti ho suggerito per Gist (6,4kb) la cosa mi ha fatto un po’ riflettere
Ci sono altre caratteristiche che ritengo minori sotto certi punti di vista, ma comunque degne di nota.
La prima tra tutte è la possibilità di creare dei Gist privati che non verranno visualizzati all’interno della piattaforma ma che saranno disponibili soltanto agli utenti che hanno il link che punta direttamente alla risorsa. Questo è molto comodo se vogliamo inserire del codice che non deve essere trovato con una ricerca ma che al tempo stesso vogliamo popolare il nostro repository di codici.
Ovviamente tutte le azioni che possiamo svolgere in un repository GitHub sono presenti anche in questi blocchi. Potremmo infatti fare un fork del progetto, una Pull Request, commentare il codice e addirittura mantenere delle revisioni che ci consentiranno di mantenere uno storico sulle modifiche effettuate nel nostro codice.
Però le sorprese offerte non finiscono qua visto che questa piattaforma lavora molto bene anche con il nostro editor di testo di fiducia: Atom.
Quello che vedi qua sopra è un pacchetto per Atom incredibilmente interessante, utilizzando la potenza della fuzzy search e alcune scorciatoie da tastiera siamo in grado di creare e richiamare i gist presenti all’interno del nostro profilo.
Sono sicuro che se hai iniziato a utilizzare Gist nel tuo lavoro questa è sicuramente una feature che troverai molto interessante; e se non lo hai ancora fatto potrebbe essere la scusa per aggiornare i tuoi strumenti di sviluppo 😀
CodePen, una piattaforma per lo sviluppatore frontend
Passiamo da uno strumento che ci permette di catalogare e organizzare il nostro codice in modo professionale e open source, a uno che è specializzato nella creazione di preview del nostro codice frontend.
A differenza del precedente, CodePen permette anche di creare un account Pro che ti permetterà di attivare diverse funzionalità, ma non è tanto di questo che ti voglio parlare al momento; quello che mi interessa maggiormente è farti capire perché la ritengo una soluzione interessante per la condivisione del tuo codice e del tuo talento!
Ho appena parlato di talento perché la caratteristica principale di CodePen è proprio quella che permette la realizzazione di soluzioni frontend che ti permettono di mettere in luce quanto ci sai fare con tecnologie come HTML, CSS e JavaScript.
Quello che vedi qua sopra è soltanto uno dei migliaia di esempi di animazioni che puoi creare su CodePen e come puoi scoprire all’interno dei nostri corsi (e a breve anche in altri articoli), è una pratica che vogliamo utilizzare sempre più spesso anche qua su skillsAndMore.
La cosa bella di questa soluzione è che non sei neanche costretto a utilizzare del codice JavaScript vanilla per creare il tuo codice, perché grazie alle funzionalità messe a disposizione da questa piattaforma potrai includere qualsiasi libreria esterna tu desideri.
Ho utilizzato il termine vanilla perché con questo si intende la scrittura di codice JavaScript classico, ovvero senza l’utilizzo di librerie come jQuery o altri. Sono convinto che tu lo sapessi già, ma un piccolo ripasso non fa mai male.
Ovviamente questo è soltanto la punta dell’iceberg perché su CodePen possiamo tranquillamente utilizzare qualsiasi precompilatore CSS o JavaScript che sia. Tutto quello che bisogna fare è modificare le impostazioni del pen che stiamo realizzando e selezionare la tecnologia che più ci aggrada.
All’interno dei vari dropdown trovano spazio precompilatori come Sass, LESS, Stylus e PostCSS giusto per parlare dei nostri amati fogli di stile; ma la cosa più bella è trovare anche i migliori precompilatori JavaScript come TypeScript, CoffeScript e Babel.
Proprio con quest’ultimo potrai scrivere codice JavaScript sfruttando la nuova sintassi ES6 senza doversi preoccupare della compatibilità con i vecchi browser.
Insomma, CodePen sembra che sia veramente in grado di fare molto e in effetti è proprio così! Grazie a questo semplice servizio possiamo anche prototipare velocemente le nostre idee e condividere un semplice link per ottenere i feedback dal nostro team.
Possiamo anche accendere la telecamera o una videoconferenza e insegnare dal vivo ai nostri studenti; in effetti lo usiamo anche noi molto spesso quando facciamo le nostre sessioni one to one con gli skillati che ci fanno questa richiesta.
Ovviamente allo stesso tempo CodePen non è la soluzione adatta a tutti i casi. È vero, possiamo rendere un pen (il nome dei nostri blocchi di codice) privato soltanto se in possesso di un account PRO, ma a essere onesti ritengo che assieme alle altre feature messe a disposizione giustifichi di gran lunga questa piccola spesa.
Se vogliamo continuare ad abbattere questo servizio, possiamo dire che non è possibile creare codice server side e che alcune cose possono sembrare complicate, ma se sei alla ricerca di uno strumento valido che ti permetta di condividere il tuo codice frontend con colleghi e amici (e magari chiedere una mano a quest’ultimi), credo proprio che questa soluzione sia da tenere in alta considerazione.
GitHub e BitBucket, i grandi punti di riferimento
Ebbene sì, anche se abbiamo creato un corso dedicato alla tecnologia che sta alla base di queste soluzioni (al momento non disponibile) non posso fare a meno che citarle nuovamente.
Ormai dovresti conoscere già questi servizi, il primo è il più famoso repository di codice open source al mondo mentre il secondo è un grande strumento a disposizione dei piccoli team che offre gratuitamente la possibilità di creare dei repository Git privati.
Non mi voglio soffermare troppo su queste soluzioni perché avremo molte altre occasioni per analizzarle nel dettaglio, ma visto che in questo articolo abbiamo discusso i migliori strumenti per condividere il proprio codice non potevano assolutamente mancare!
Con questi due servizi potrai condividere qualsiasi tipo di codice, ci sono persone che addirittura creano dei repository per condividere delle liste di soluzioni o di ebook liberamente scaricabili. Se non mi credi prova ad andare su GitHub e scrivere “awesome”, sarai sotterrato dall’incredibile mole di informazioni che potrai ottenere.
Se non hai neanche voglia di cercare, segui questo link che troverai la lista di tutte le liste.
Come abbiamo già discusso anche all’interno del corso, questi due servizi sono ottimi per team di tutte le dimensioni e consentono di lavorare comodamente lanciando qualche comando da terminale o utilizzando la tua GUI preferita per scaricare e caricare il codice dai singoli repo.
Conclusioni
Ebbene, ritengo di aver raggiunto la fine di questo articolo e non tanto perché non c’è più niente da dire su questi servizi; anzi di cose ce ne sarebbero eccome!
Però la mia intenzione era rivolta maggiormente ad aprire una conversazione con te. Conoscevi già i servizi elencati? Ne hai già usato qualcuno? Oppure usi servizi del tutto diversi?
Non esitare ad aggiungere il tuo commento qua in basso o ancora meglio saltare nella discussione presente nel nostro forum perché io sono incredibilmente curioso di scoprire quali sono le soluzioni che stai utilizzando e come.
Lascia un commento