Brackets Editor Open Source

Brackets – Fantastico Editor Open Source

Come avrai notato dai nostri ultimi articoli, html5AndMore sta finalmente ripartendo con nuovi contenuti utili a migliorare le tue conoscenze su questo ed altri linguaggi web. Tutta queste conoscenze sarabbero inutili senza andare ad analizzare i nuovi strumenti che velocizzano e migliorano il nostro lavoro ecco perché oggi voglio parlarti di Brackets!

Contenuti Extra

Con tutto il rispetto che porto per tutti quei piccoli sviluppatori che creano progetti open source resi disponibili a tutta la comunità web, spesso grazie proprio a GitHub, la prima cosa che voglio mettere in luce che riguarda questo editor è che è stato costruito dalla stessa Adobe, azienda che da moltissimi anni supporta ed aiuta lo sviluppo web.

Detto questo, non voglio certo screditare l’ottimo lavoro che quotidianamente viene pubblicato nei repository di GitHub, ma avere alle spalle una azienda come Adobe è sicuramente un valore aggiunto per la longevità di questo progetto! C’è anche da dire che potresti contribuire nello sviluppo di questo editor dato che è stato interamente scritto con linguaggi che dovresti già conoscere bene come HTML, CSS e JavaScript.

Ma adesso fermiamoci qua con le presentazioni ed andiamo a vedere veramente che cosa ha da offrire!

Che Cosa è Brackets?

Come già detto, Brackets è un editor open source che ha uno scopo molto alto ed è stato creato per importare la potenza di un IDE all’interno di un semplice editor di testo. Potrai configurare questo editor come meglio preferisci grazie al gran numero di estensioni che sono state pubblicate (approfondiremo a breve questo argomento) e avrai il potere di costruire il tuo IDE preferito proprio installando soltanto quello che ti serve.

Brackets Utile Editor Open Source

Il primo passo in avanti nella creazione di questo editor è stato proprio quello di allontanarsi dalla pesantezza del linguaggio JAVA, potente e multipiattaforma, che ha permesso la nascita di molti IDE interessanti come Eclipse, Aptana Studio, NetBeans e molti altri ma che si sono sempre distinti dalla loro pesantezza. Proprio per questo l’approccio nello sviluppo di questo editor si è focalizzato principalmente nell’uso di tecnologie che permettono una grande personalizzazione ma che non appesantiscono troppo il sistema, come già detto, appoggiandosi a linguaggi come HTML, CSS e JavaScript.

Grazie a questo approccio hai la possibilità di utilizzare un editor veramente veloce e semplice da utilizzare, ma non è soltanto questo il valore aggiunto di questo editor.

Uno Sviluppo più Semplice

Grazie a strumenti come CodeKit o LivePreview gli sviluppatori web hanno potuto velocizzare il proprio lavoro grazie alla possibilità di visualizzare le modifiche effettuate direttamente senza neanche la necessità di dover aggiornare la pagina del browser. Non sarebbe bello avere questa caratteristica sviluppata direttamente all’interno del proprio editor?

Per fortuna nostra gli sviluppatori di Brackets sono stati così intelligenti da includere nativamente questa caratteristica ed anche altre molto utili, come ad esempio la possibilità di modificare le proprietà CSS di un elemento direttamente all’interno della pagina HTML.

Ti suggerisco di guardare il video allegato a questo articolo dato che molti concetti che andremo ad affrontare saranno più semplici da comprendere con degli esempi dal vivo.

Un Mare di Estensioni

Come ti dicevo precedentemente uno dei punti di forza di questo plugin risiede proprio nelle sue capacità di estensione. L’editor viene rilasciato con molte caratteristiche davvero interessanti (come la live preview e la possibilità di modificare velocemente il CSS già presentate prima) ma all’interno del suo sviluppo è stata prevista la possibilità di estendere questo progetto aggiungendo facilmente delle estensioni.

Se ti interessa vedere una lista completa puoi andare a consultare la nuova pagina che è stata creata ma, la cosa veramente interessante, è che potrai installare tutte queste estensioni (anche se ti suggerisco di mettere soltanto quelle che ti servono veramente) direttamente all’interno del tuo editor. Fino a poco tempo fa dovevi andare sui repository GitHub di ogni singola estensione, scaricarla ed installarla a mano; oggi ti basterà aprire la finestra estensioni e selezionare le tue preferite.

Brackets Extensions Manager

Alcune delle estensioni più famose ed utili sono entrate direttamente nel core di questo progetto, come l’utilissima Hover Preview che permette di avere un’anteprima del colore, sfumatura o immagine inserita semplicemente posizionando il cursore sopra di questi valori mentre molte altre possono essere installate facilmente.

In questo articolo ti parlerò brevemente di due estensioni che ti permetteranno di utilizzare due tecnologie che velocizzeranno il tuo lavoro HTML e CSS.

Emmet – Scrivi HTML alla velocità della luce

Questa estensione è l’erede naturale del precedente Zen Coding. Per chi non conoscesse le sue caratteristiche permette di creare elementi e strutture HTML con una singola riga di codice. Facciamo un esempio concreto.

Una volta installato Emmet (ti mostro come fare all’interno del video) ti basterà inserire una stringa come questa:

Per avere questo risultato:

Questo è soltanto un piccolo esempio per farti capire le potenzialità di questa estensione, se sei interessato ad approfondire questo argomento ti invito ad aggiungere un commento in basso perché sto pensando seriamente di fare un articolo che spieghi i differenti aspetti di questa estensione. Ma già grazie a questo piccolo esempio ti è possibile capire quanto sia veloce creare una serie di elementi HTML con una singola riga di codice.

Compilatore LESS.js Pronto all’uso

Un’altra estensione di cui ti voglio parlare e che sicuramente è di mio interesse è proprio la possibilità di avere un compilatore LESS.js da inserire come semplice estensione.

Ormai dovresti aver capito come installare questo componente, apri il tuo Extension Manager, cerchi la parola LESS e fai semplicemente click su Install; ecco fatto. Da questo momento in poi potrai creare qualsiasi file .less e lasciare che sia il tuo stesso editor di testo a compilarlo in un classico foglio di stile senza doverti preoccupare di richiamare file JavaScript o altri programmi.

Personalmente continuo a essere favorevole all’utilizzo di programmi esterni per compilare codice LESS.js come ad esempio Prepros o altri che potrai trovare all’interno del corso che ho sviluppato appositamente, dato che ti permettono una migliore gestione del codice e delle cartelle.

Per il momento questa estensione è molto base, compila il codice .less ad ogni salvataggio del file, ma fa veramente bene il suo lavoro e se non ti dispiace dover organizzare i tuoi file a mano è un’ottima soluzione. Ho anche contattato il creatore di questa estensione per chiedergli se ha intenzione di aggiungere qualche altra caratteristica, appena avrò delle news sarai tra i primi a scoprirlo!

Conclusioni

Siamo giunti al termine di questo veloce articolo anche se ci sarebbero altre decine di estensioni da vedere che ti permetteranno di incrementare il potere di questo editor. Personalmente ho deciso di fermarmi qua perché, assieme al video, la mia intenzione era quella di introdurti a questo nuovo e gratuito editor che ha messo la comunità davanti a tutto!

Ti ricordo che questo editor è stato sviluppato con linguaggi che già conosci molto bene e se hai intenzione di aggiungere una tua personale estensione non dovrai fare altro che aprire lo stesso Brackets ed iniziare a scrivere! Se vuoi avere maggiori informazioni su come scrivere una estensione per questo editor non devi fare altro che comunicarlo all’interno dei commenti e comunicarmi questo tuo interesse, cercherò di sviluppare nel minor tempo possibile un articolo che ti insegni come fare!

Intanto, se vuoi dare una mano a questo sito a crescere ma sopratutto hai trovato questo articolo interessante, prendi in considerazione la possibilità di condividerlo con i tuoi contatti attraverso i bottoni sociali che trovi qua in basso o di iscriverti alla nostra newsletter!

Lascia il tuo Pensiero

6 Responses to “Brackets – Fantastico Editor Open Source”

    • Andrea Barghigiani

      ehehehehehehe “No xchÈ io schappato di squola da piccoli”

      Scherzi a parte, evidentemente ero proprio convinto che si scrivesse così, grazie per la dritta, adesso ho sistemato il tutto e mi prendo anche un pò in giro nel video ;)
      PS: in questo caso sto usando l’editor di WP e nn “il famoso editor”, mica mi scrivo le pagine in HTML; altrimenti mi avrebbe corretto :D

      Rispondi
    • Andrea Barghigiani

      Anche io ho un amico che usa Fedora e è parecchio contrario a questa momentanea scelta di Brackets, considera comunque che oltre che essere beta, per linux è stato rilasciato al massimo da un paio di mesi e quindi è da considerarsi ancora più che beta…

      Speriamo che con le prossime versioni la situazione migliori!

      Rispondi
      • Giovanni Cappellini

        Nella mia personale esperienza ho trovato Fedora molto più stabile rispetto ad Ubuntu, peccato che ormai per le aziende Ubuntu sia sinonimo di Linux (anche Spotify per esempio ha rilasciato una preview solo in formato *.deb)

        Proverò a convertire il pacchetto con alien.

        Rispondi
        • Andrea Barghigiani

          Ciao Giovanni,

          in effetti questo sembra un grosso problema nella community Linux, come dicevo anche prima, spesso sento parlar bene di Fedora e RedHat Products ma al momento l’unica cosa che ho provato è stata Ubuntu che installo sul portatile della mia ragazza (al momento io sono su Mac). Con Fedora ebbi una breve esperienza nel mio periodo linux ma non ha resistito molto perché poi mi sn messo a provare Gentoo, Debian ecc…

          Se riesci a fare un pacchetto per Fedora comunicacelo che sarai in grado di far contente non poche persone ;)

          Grazie intanto per il tuo commento e a presto.

          Rispondi