Blog d'un Éternel Geek

Développer en front end avec Brackets, l'éditeur open-source

http://vivageek.com/data/images/dev/bracketdev1.jpg

 

Je parlais de développement et de frameworks. Si vous avez le projet de développer votre propre blogue ou site qui sera la future plate-forme de votre marque ou produit, j'ai découvert une perle dans le développement front end du nom de Brackets.

 

Rare sont des éditeurs gratuits de cette qualité et plus rare encore venant d'Adobe Systems alors autant en profiter.

 

Des éditeurs pour le web design, il y en a énormément sur le marché adapté à toutes les configurations et surtout à tous les types de programmeurs, toutefois peu sont open-source, multiplateforme et surtout interactifs grâce à un aperçu en direct de nos modifications.

 

Orienté essentiellement web design, il sera, j'en suis sur le partenaire idéal pour votre travail de fond sur un Framework parmi ceux qui sont cités dans mon article développé, c'est facile.

 

Sachez que ce travail en amont est indispensable pour un référencement propre et soigné par la suite. Une mauvaise mise en place de votre blogue ne donnera pas de bons résultats par la suite et ceux même si vous suivez les indications à la lettre ensuite.

 

http://vivageek.com/data/images/dev/bracketdev.jpgIl est important de ne négliger aucune étape de la construction d'un projet. Je comprends qu'il soit difficile pour certain de créer un projet de cette envergure sans connaissance en langage informatique.

 

On est pas des super héros du codage mais on peut se débrouiller avec de bons outils.

 

 

 

 

 

 

Dans la gamme des bons éditeurs, il y a sublime text qui est comme son nom l'indique sublime. Malgré tout, vous verrez qu'une fois avoir été touché par l'aisance et les possibilités de Brackets, vous aurez du mal à travailler avec un autre.

 

Un éditeur front end

 

http://vivageek.com/data/images/dev/bracketsdev2.jpg

 

Tout d'abord, il faut bien séparer et comprendre le concept du Front end et back end.

 

Dans notre cas, nous travaillons front end, c'est-à-dire dont nous intervenons surtout sur la façade du projet côté client. J'entends la partie graphique (CS6, Paint, Gimp,…), HTML5 (architecture), CSS3 (design, couleurs,…) et JavaScript (interactivité, animation,…).  Contrairement à back end ou là nous intervenons sur la partie serveur (PHP, HHVM, SQL, MYSQL,…).

 

Les frameworks que nous avons vus utilisent essentiellement du HTML5, CSS3 et JS, ce qui vous laisse le champ libre à la personnalisation. Du coup, je cherchais un éditeur pro qui permet de travailler sur du web design pur sans contrainte, avec facilité et si possible open-source.

 

Brackets en 5 points

 

http://vivageek.com/data/images/dev/bracketsdev3.jpg

 

Vous l'aurez compris si vous me suivez depuis mes débuts, je résume la plupart des objets de mes articles en 5 points maximums. Brackets ne dérogera pas à la règle des 5 mais ils définissent bien cette bécane qui est vraiment d'une souplesse incroyable.

 

 Premier Point :

 

Vous vous souvenez, je parlais dans un de mes articles de ces outils qui mettent en ligne vos terminaux de commande, ce qui est pratique pour travailler et visualiser plein écran le résultat, Brackets fait de même.

 

Mieux il est en synchronisation avec votre navigateur. Avec Live Preview, Brackets travaille directement avec votre navigateur pour que vos modifications sur le code se fassent instantanément. C'est du temps réel, ce qui est avantageux, permettant même de n'avoir pas à utiliser Firebug ou Developper.

 

Il se caractérise par un petit éclair en haut à droite, cliquez dessus et vous serez envoyez sur Chrome où votre projet sera visible.

 

Personnellement, j'étais obligé d'ouvrir mon WAMP ou XAMP et de faire le va et vient entre mon éditeur, mes fichiers et le navigateur pour voir la modification. Plus besoin, vous ouvrez votre page navigateur à droite, l'ide à gauche et vous travaillez en temps réel.

 

Deuxième point :

 

Il est open source, gratuit,  communautaire et codé en HTML, CSS et Javascript. Cette option permet de l'améliorer ou le modifier à notre guise. Plus encore, étant communautaire sur github, il est fort à parier qu'il subira de nombreuses modifications dans l'avenir profitant à tous.

 

Je connais peu d'éditeurs de ce niveau qui soit autant open, son codage simple permet de l'utiliser sur toutes les plates-formes OS sans restriction, ce qui est idéal pour des projets portables.

 

Troisième point :

 

La gestion des images sur le code source et diverses fonctions utiles. En effet, il permet en survolant avec le curseur de la souris le code source, par exemple sur une valeur de l'attribut Src du tag image, d'afficher une version miniature de l'image dans une bulle du plus bel effet. Cela fonctionne aussi avec les valeurs données URI.

 

Quatrième point :

 

Éditer plus rapidement votre CSS. Brackets offre la possibilité de modifier les règles CSS directement dans l'éditeur d'une page HTML. Avec votre curseur allé sur un élément HTML, appuyez sur Ctrl + E pour activer la commande Modifiée rapide. Cela va scanner les fichiers ".css", et trouver les règles qui correspondent à l'élément sélectionné, que vous pouvez ensuite modifier sans avoir à changer les fichiers.

 

Vous pouvez en utilisant cette méthode changer les règles CSS qui sera directement appliquée au projet.

 

Cinquième point :

 

Brackets, je l'ai dit plus haut est communautaire et modulable, par conséquent, il est extensible et déjà de nombreuses extensions sont présentes sur le site et sur github.

 

En cliquant sur l'icône en dessous de Live Preview, on va ouvrir la fenêtre Extension Manager modale.  Alors là vous allez être le plus heureux des concepteurs puisque le nombre est bien fourni en extension ainsi qu'en thème.

 

Voici la vidéo de présentation de Brackets :

 

 

 

Merci d'avoir lu mon article. A bientôt.






 Geek me     Je suis un Geek dans l'âme. 18 ans à silloner internet pour récolter des informations afin de comprendre son fonctionnement. Idéalement j'étudie également le comportement humain.

C'est afin de vous partager mes connaissances que j'ai ouvert ce blog alors je vous souhaite une bonne lecture.



À lire également


Écrire un commentaire

Votre adresse de messagerie ne sera pas publiée.

Quelle est la troisième lettre du mot ljvv ? :