[edito] quelques nouvelles concernant mon activité github

Petites nouvelles rapides concernant mon activité sur github. Pas mal de petits changement ces derniers temps donc :

Suppression du dépôt de scenari-course-materials

Suite à quelques changements dans mon activité (présents ou à venir), j’ai en effet décidé de ne plus, pour l’heure, publier les sources de mes supports de formations. Vous pourrez cependant retrouver, encore pour quelques temps, les exports de ces mêmes cours sur mon site, mais devraient attendre encore quelques mois pour y apporter toute modification par vous même.

Création du mini-projet GestionClient-JS

Afin de mieux illustrer certains points de développement JavaScript, j’ai créé ce mois-ci un nouveau mini-projet de démonstration pour ce langage, dans la lignée des autres projets du même genre déjà exportés (Java, Java-Spring, PHP, Symfony …). Vous y retrouverez une démonstration de quelques technos incontournables, comme Node.js, Sequelize, Jasmine / Karma, Yeoman, Grunt, Bower, Angular.js ou encore Bootstrap.

Gist : bash, vim et compagnie …

Enfin, pas mal de petits scripts et confs ont été rajoutées sur Gist :

  • gogit – une fonction bash détectant automatiquement les différents dépôts git locaux de votre machine, afin de vous offrir une commande permettant de vous y rendre le plus rapidement possible
  • ctags-angular : configuration de ctags pour vos projets Angular.js
  • angular_install : script bash d’installation personnalisable d’un environnement de développement complet pour Angular.js et autres. Pour l’instant, ce script est encore en beta, et ne supporte que les distributions Debian et dérivées.

[git] synchoniser un projet git entre deux machines

FYI : cet article a été rapidement écrit pour répondre à une question précise. Il demande donc de déjà maitriser quelques bases de git (au moins son vocabulaire), et d’administration système.

Si, comme moi, vous utilisez git au quotidien, y compris pour des projets personnels, vous vous serez sans doute retrouvé au moins une fois dans la situation suivante : après avoir réalisé quelques modifications à partir d’une même version sur des ordinateurs différents, vous voudriez pouvoir synchroniser ce travail, sans pour autant faire un push sur le serveur central (comme GitHub).

Vous vous retrouvez donc à vouloir effectuer un push vers une machine ne disposant, à priori, ni d’un dépôt bare (c’est à dire initialisé avec une structure expressément conçue pour recevoir des push), ni d’un serveur http.

Voici donc la marche à suivre. Pour ce faire, nous allons utiliser :

  • openssh
  • git (bien entendu)
  • et c’est tout !

Par soucis de simplicité, j’utiliserais les dénominations suivantes :

  • workstation : la machine devant recevoir le push
  • laptop : la machine à partir de laquelle vous voulez effectuer le push

Étape 1 – OpenSSH

Tout d’abord, installez un serveur OpenSSH sur la workstation.  Je ne détaillerai pas ici cette étape, par souci de concision. Mais comme je ne suis pas vache, voici les liens pour savoir comment effectuer l’opération sous Windows, GNU/Linux, et Mac OS X.

Étape2 – sur le laptop

Ensuite, effectuez un commit sur le laptop. Pas d’inquiétude, je me doute bien que vous ne voulez pas de ce commit. Nous le ferons donc disparaitre par la suite.

Puis, ajoutez la workstation comme remote du dépôt sur le laptop :

git remote add workstation ssh://user@ip-machine-distante/chemin/vers/le/depot/distant

Ensuite, faites votre push, mais attention : comme le dépôt distant est « non-bare’, il nous faudra le faire sur une nouvelle branche :

git push workstation master:laptop-master

Etape 3 – après le push

Rendez vous ensuite sur la workstation, où vous pourrez effectuer votre merge en toute tranquillité, puis continuer la tâche en cours.

git checkout master
git merge laptop-master

Une fois la tâche achevée, vous pouvez enfin effectuer un « vrais » commit, et le fusionner avec le commit précédent, temporaire, via :

git rebase -i HEAD~2

Là, ajouter squash devant la ligne correspondant au tout dernier commit, et ne modifiez rien d’autre. Si tout se passe bien, une dernière édition, vous permettant de choisir le message de commit à conserver, vous sera proposée. Supprimez la ou les lignes correspondant au commit temporaire, et ne conservez que celles correspondants au commit à conserver. Il ne vous reste plus alors qu’à enregistrer, et à envoyer votre nouveau commit sur le serveur :

git push origin master

Bonus : et si ça se passe mal ?

Si le rebase ou le push échouent, ce sera sans doute la conséquence d’une modification de l’historique, non prévue dans le descriptif plus haut. Attention : le squash, dans notre cas, doit absolument être effectué sur un commit non présent sur le serveur distant, et dont le commit précédent (celui avec lequel il sera fusionné) n’a pas non plus été push sur le serveur (ce qui est parfaitement notre cas ici, avec un commit temporaire, seulement nécessaire à la synchronisation entre nos deux machines, et un commit local, à push après un squash).

Voici donc quelques commandes qui devraient pouvoir vous aider en cas d’erreurs :

  • annuler un rebase en cours
git rebase --abort
  • annuler un rebase terminé
# afficher l'historique complet
git reflog
# réinitialiser le dépôt à l'étape précédent le rebase
# (remplacez X par le nombre correspondant)
git reset --hard HEAD@{X}

nouveau gist : yo-completion

Pour ceux qui, comme moi (et comme indiqué dans le post « un environnement de développement idéal pour AngularJS« ), utilisent régulièrement le générateur angular yo, je viens de créer (ou plutôt, améliorer), un petit script bash_completion pour yo.

Vous le trouverez sur mon compte GitHub Gist.

Pour ceux n’étant pas familiers avec bash_completion, il vous suffira d’installer la package bash_completion, si ce n’est déjà fait, et d’ajouter le script au dossier /etc/bash_completion.d/.

Ce script n’a pour l’instant été testé que sur Debian, mais devrait fonctionner sur les autres distributions, ainsi que pour Mac OS X et Windows. Merci de me faire part de vos retours.

[linux] désactiver le beep de la ligne de commande

Si vous êtes comme moi, et utilisez à tord et à travers votre terminal sous GNU/Linux, sans doute avez vous déjà été mis à bout de nerfs par le petit « beep » (ou « plop », on va pas chipoter) qui peut, sur certaines installations, arriver à chaque complétion infructueuse.

Ne vous en faites plus, j’ai la solution pour désactiver ça !

Allez simplement dans votre dossier personnel, et éditez le fichier .inputrc (ou créez le si il n’existe pas encore).

vim ~/.inputrc

Là, ajoutez la ligne suivante, qui désactivera pour de bon ce son horripilant :

set bell-style none

Et voila ! Merci qui ?

[JS] démarrer un projet AngularJS

Comme je travaille pas mal sur AngularJS ces derniers temps (et encore pour un certain moment), je vais en profiter pour vous livrer petit à petit les quelques points qui me semblent intéressant à aborder sur un blog par rapport à cela.

Histoire de faire les choses dans l’ordre, après avoir vu comment mettre en œuvre votre environnement de développement, voyons à présent comment démarrer un nouveau projet, de plusieurs manières, suivant vos besoins.

Angular Seed

La plupart des projets actuels proposent un « projet de démarrage » (ou « squelette »), comprenant tous les éléments typiquement utiles pour un projet se basant sur leur solution (par exemple, struts2-blank pour les Javaistes). AngularJS ne fait donc pas exceptions, et propose un mini-projet de démarrage, dénommé Angular Seed (« the seed for AngularJS apps »).

Ce mini-projet de démarrage comprend donc la structure typique applicable à la majorité des projets AngularJS, mais aussi les configurations (cf package.json) bower, protactor (pour les test suits) et karma (pour les tests cases).

Une solution rapide et efficace pour démarrer un petit projet en vitesse donc. Ce qui sera parfait plus les plus débutants d’entre vous, d’autant plus que le readme du projet sur Github comprend toutes les infos dont vous pourriez avoir besoin.

Allez, comme je suis généreux, je vais tout de même vous donner les premières étapes essentielles. Premièrement, il vous faudra cloner le projet à partir de github :

git clone --depth=1 -o boilerplate https://github.com/angular/angular-seed.git MonProjet

Cette commande (à lancer bien évidemment à partir du dossier destiné à contenir celui de votre projet), vous permettra de récupérer tous les fichiers dont vous aurez besoin (et même plus), sans pour autant récupérer tout l’historique des modifications (nous ne cherchons pas à améliorer Angular-seed, mais à créer notre propre projet à partir de celui-ci). Enfin, le repo d’origine est renommé en « boilerplate », afin d’éviter toute confusion avec le repo de votre projet.

Vous pouvez également supprimer cette référence au repo en exécutant la commande :

git remote rm boilerplate

Il vous faudra ensuite installer les dépendances :

npm install

Il vous faudra ensuite éditer les fichiers package.json et bower.json, afin de modifier le nom, la description et le site du projet. Vous pouvez également modifier le port sur lequel sera lancé votre projet (via la commande npm start) dans la section scripts / start du fichier package.json si vous désirez pouvoir lancer plusieurs projets en parallèle.

Il ne vous reste plus alors qu’à configurer votre propre repo (si vous en avez besoin), à faire un petit peu de nettoyage, et à coder.

Petite astuce au passage : il existe un générateur yeoman, bien que très sommaire, pour modifier la licence de votre projet. Pensez y.

Remarquez que cette solution est très limitée : le projet offert est minimaliste, et ne comprend ni Grunt ni Bootstrap. Vous aurez donc besoin de faire de nombreuses modifications pour vraiment obtenir un projet prêt à être démarré (vous pouvez, pour vous aider à mettre en place Grunt, vous rendre par exemple sur le blog de Nikos Baxevanis).

Si, donc, vous avez vraiment besoin de démarrer un véritable projet (et non un simple mini-projet d’apprentissage), cette solution ne sera le plus souvent pas suffisante. Heureusement, Yeoman est là pour ça.

Dites Yo !

Si vous avez déjà installé Yeoman, et sa commande yo, en suivant le post précédent, vous vous êtes peut-être demandés pourquoi je vous avait fait installer ce logiciel. Eh bien c’est très simple : parce que vous n’allez rapidement plus pouvoir vous en passer.

Yeoman est en effet un projet visant à vous aider à rester productif dans vos projets web. Inspiré du système de génération de Rails, Yeoman offre en ensemble de générateurs de « scaffolding », dont certains particulièrement utiles pour AngularJS, que ce soit pour démarrer votre projet, ou permettre de créer rapidement des éléments de celui-ci par la suite.

Une fois yo et son générateur angular installé, vous pouvez directement créer un dossier pour votre nouveau projet, et, une fois dans celui-ci, lancer la commande suivante :

yo angular

Notez que vous pouvez également ajouter un dernier argument à cette commande, afin de définir le nom de votre application, ou encore ajouter l’option –coffee afin de générer du CoffeeScript à la place du JavaScript.

Yo vous permettra alors de sélectionner l’utilisation de Sass, bootstrap, et d’un ensemble de modules Angular.

Une fois cette étape terminée, vous aurez à votre disposition toute la structure dont vous avez besoin pour démarrer votre projet.

Remarquez cependant que le projet est volumineux, compte tenu des diverses dépendances installées. Pour travailler sur ce projet avec Brackets, je vous recommande donc soit d’ouvrir directement le dossier app, soit d’utiliser l’extension Exclude Forlders.

Pour la suite, je reviendrai bien entendu sur les autres générateurs Angular de Yeoman, ainsi que sur Grunt et Bower. A bientôt donc.

 

[JS] un environnement de développement idéal pour AngularJS

Une fois n’est pas coutume, on va enfin pouvoir revenir au développement sur ce blog. Et comme je devrai travailler, à priori, principalement sur de l’Angular ces prochains mois, vous devriez voir apparaitre pas mal d’articles sur le sujet (même si, comme d’habitude, je ne vous garanti rien).

Bref, commençons vite, commençons bien, en mettant en place tous les outils dont nous pouvons avoir besoin.

Tout d’abord, il va nous falloir faire des choix, tant le nombre d’outils proposé est grand. Quelques critères essentiels retiendront ici mon attention :

  • licence : l’ensemble des logiciels employés devront être libres
  • portabilité : travaillant sur de nombreux systèmes différents, j’ai en effet l’absolue nécessité de disposer de logiciels utilisables aussi bien sous GNU/Linux que sous Mac OS X ou Windows.
  • cohérence : disposer d’un environnement cohérent,  et le plus constant possible entre les systèmes
  • légèreté / rapidité : nul besoin me semble-t-il de préciser ici les raisons de ce critère

Continuer la lecture de [JS] un environnement de développement idéal pour AngularJS

[web] les meilleurs sites pour apprendre

Si vous êtes sur ce blog, c’est sans doute soit que vous travaillez dans l’informatique, et cherchez à monter en compétence, soit vous y vouez un fort intérêt à titre de loisir, et que vous chercher donc à en apprendre encore et toujours plus.

Alors même si vous trouverez sur ce site divers cours qui pourront sans doute vous aider, ceux-ci n’étant ni exhaustifs, ni didactiques (puisque destinés à être utilisés dans le cadre d’un cours en présentiel), vous n’y retrouverez sans doute pas entièrement votre compte. Heureusement, d’autres ont, à plus ou moins grande échelle, déjà mis en ligne tout ce dont vous avez besoin. Petit florilège.

Petite remarque avant de démarrer : la plupart des bonnes ressources sur le web sont en anglais. Et c’est particulièrement le cas pour le sujet qui nous intéresse ici. Je ne préciserai donc pas quand il s’agit de plateformes 100% anglophones, mais plutôt si quelques cours sont disponibles en français.

Continuer la lecture de [web] les meilleurs sites pour apprendre

[Misc] mon histoire de l’informatique

Prenant conscience du temps passé depuis mon tout premier contact avec l’informatique, et du nombre d’évènements qui auront fait évoluer ma vie et mon métier, m’est venu l’idée de réaliser une petite timeline de quelques évènements relatifs à l’informatique qui auront été déterminant dans ma vie.

Bon, c’est pas très joli intégré comme ça sur le blog, donc je vous invite à aller plutôt la consulter en pleine page, en attendant que je l’intègre à ma page personnelle.

 

[design] créer un diagramme circulaire avec Gimp

Dans la rubrique « codeur à tout faire« , voici un petit tuto sur un sujet encore jamais abordé sur ce blog : l’édition graphique.

Car oui, nous avons tous besoin un jour ou l’autre de créer de petits éléments graphiques statiques, sans pour autant perdre du temps à jongler avec les canvas et autres.

Comme toujours, nous allons utiliser ici un logiciel libre très populaire car simple et efficace : Gimp.

Créer une nouvelle image

Pour commencer à créer notre diagramme circulaire avec Gimp, créer une nouvelle image (Ctrl+N), en 800 x 800.

Gimp nouvelle image

Créer un cercle

Première étape : créer un cercle.

Continuer la lecture de [design] créer un diagramme circulaire avec Gimp

[dev] mise en place d’un IDE Eclipse pour le scripting Bash

Java SE, Java EE, Android, PHP, Ajax, PhoneGap, Python, Bash … tout comme certainement nombre d’entre vous, je développe aujourd’hui, suivant les projets, pour de nombreux contexts et objectifs très variés. Du coup, je me retrouve régulièrement à naviguer entre un IDE et un autre, la console, un éditeur tel vim, et divers outils plus ou moins variés. Et ceci est tout particulièrement le cas quand je dois réaliser quelques rapides scripts pour mon serveur GNU/Linux.

Alors aujourd’hui, on rationalise ! Je vais donc vous montrer, pas à pas, comment constituer un IDE complet et efficace pour le scripting GNU/Linux, sur une base Eclipse. Première étape : le Bash !

Installation de Eclipse

Eclipse peut rapidement devenir une « usine à gaz », sur lequel vous n’utiliserez ni les mêmes plugins, ni les mêmes vues, perspectives et donc configurations suivant les contexts. Inutile donc de vous créer un « super Eclipse », bourré de plugins, pour tous les usages. Installez vous plutôt plusieurs version d’Eclipse différentes suivant les usages (cela est permis par l’aspect « portable » d’Eclipse).  Personnellement, j’évite donc l’installation d’Eclipse par paquet sous Debian (bien trop rarement mis à jour, et en conflit avec l’approche précédemment évoquée), et extrait la version d’eclipse adaptée à l’usage voulue dans le dossier /opt/eclipse, pour ensuite mettre en place un lien symbolique dans /usr/local/bin. Pour suivre cet exemple, vous devez donc :

  1. télécharger la dernière version d’Eclipse adaptée à votre usage. Comme aucune ne l’est vraiment ici, nous allons utiliser la version d’Eclipse la plus basique et légère, « Eclipse for Java developpers ».
  2. extraire l’archive téléchargée dans votre dossier d’installation :
    cd /opt/eclipse
    sudo tar -xvzf ~/downloads/eclipse-java-luna-SR2-linux-gtk-x86_64.tar.gz 
    sudo mv eclipse eclipse-scripting
  3. mettre en place un lien symbolique vers le fichier eclipse dans ce dossier dans un des dossiers de votre PATH :
    sudo ln -s /opt/eclipse/eclipse-scripting/eclipse /usr/local/bin/eclipse-scripting
  4. lancer eclipse
    eclipse-scripting

Remarque : pour plus d’efficacité, je recommanderais cependant de réaliser des installations multiples comme ici que pour des version d’Eclipse très différentes (par exemple, si vous développez des extensions Eclipse et nécessitez une version Kepler et une Luna). Pour des cas comme celui présenté ici, il sera préférable de profiter de la possibilité offerte par Eclipse de mettre en place de multiples configuration, et de démarrer sur l’une de celles-ci au choix. Je ne présenterai cependant pas cette méthode ici par soucis de simplicité. En attendant un futur article sur le sujet, vous pouvez consulter celui de lorenzobettini.

Ajout des plugins pour Bash

Nous allons à présent commencer par mettre en place en environnement complet pour le Bash.

Continuer la lecture de [dev] mise en place d’un IDE Eclipse pour le scripting Bash