BarCamp web 2013 – 4ième journée

Une intervention à réaliser rapidement impose à Thomas de décaler sa présentation sur Rails 4. Nous avons beau nous être éloignés de l’entreprise, nous en restons pas moins disponibles pour gérer les urgences.

Julien aura rédigé le plus court article du blog : une seul ligne. Lorsque tout est dit ailleurs, un simple lien suffit ! Mais aussi un article sur Angular JS plus élaboré.

Lise nous fera part de sa veille au sujet des sites réaliser en Responsive Design. Des nouveautés, des designs bluffants, reste à savoir les pré-requis technologiques qui détermineront si nous pouvons les mettre en oeuvre facilement. Et Emmanuelle a rédigé un article sur le Display, ou comment faire de la publicité sur internet à moindre coût à condition de réaliser beaucoup d’efforts.

Avant de partir nous réaliserons un débrief de ces quatre jours, d’où il ressortira la nécessité dans nos métiers de pratiquer régulièrement ces activités de veille afin de ne pas être « dépassé » par les nouveautés. Ainsi que le nombre de sujets qui n’ont pu être abordés faute de temps. Mais aussi une motivation d’équipe, et de l’énergie, tout à fait perceptibles.

BarCamp Web 2013 – 3ième journée

Comme nous l’avions envisagé hier, la journée commença par la mise en place de graphiques en JavaScript sur un projet existant où le besoin était prégnant avec pour binôme Matthieu et Frédéric.

Puis Julien nous présenta des technologies émergentes, notamment NodeJS et ses acolytes. L’univers du web bouge en permanence et ce qui semblait impossible il y a quelques années devient une réalité tangible. De quoi proposer de nouvelles solutions à nos utilisateurs.

En fin de matinée, Frédéric présenta rapidement le parallèle troublant entre la vision agile et certaines approches éducatives.

L'équipe, équipée de portables, est de plus en plus mobile.

L’après-midi, Matthieu fit des recherches afin de pouvoir utiliser Rails grâce à NetBeans. Bon, à priori, c’est assez compromis, vu qu’il n’est plus supporté. Du coup, nous avons eu droit à une présentation des formulaires en HTML5, notamment pour les validations. Beaucoup de temps à gagner, mais il faudra encore attendre un peu, pour que ces fonctionnalités soient supportées par tous les navigateurs.

Au cours de ce BarCamp nous avons utilisé de manière accrue les vidéo comme vecteur des connaissances. En effet, de très bonnes conférences, souvent en anglais, sont disponibles sur internet. Y compris certaines données par les inventeurs des technologies ! Le monde est de plus en plus petit, les connaissances de plus en plus accessibles à ceux qui se donnent les moyens de les acquérir.

BarCamp Web 2013 – 2ième journée

Après la première journée, cette seconde s’ouvre sur les chapeaux de roues puisqu’après que Julien nous ait expliqué ce qu’étaient les tests automatiques, nous avons droit à une session de live coding avec Thomas et Julien ! Ou comment le binômage peut être réinventé au regard des tests automatiques. Une belle présentation qui dura près d’une heure : lorsque les bonnes pratiques entrent en résonance, cela donne un ensemble détonant !

La bibliothèque, un lieu idéal pour binômer.

Ensuite Matthieu nous a présenté la réalisation de graphes en JavaScript by Google, grâce à Google Chart Tools. Que de chemin parcouru ces dernières années : les résultats obtenus sont bluffants et confirment que Flash se meurt un peu plus chaque jour. Nous avons une application immédiate à cette nouvelle technologie : si nous avons le temps nous le ferons au cours de ce BarCamp, autrement ce sera fait à notre retour.

En début d’après-midi, il y a eu une session de rattrapage pour visionner la présentation faite par Frédéric au cours du dernier CaenCamp, au sujet du binômage. Et un second rattrapage avec la (re)lecture du Manifeste Agile.

Lise nous a ensuite fait une présentation de Susy. C’est un enjeu majeur, vu l’importance du responsive design pour nous ces prochaines années. Et un gain de productivité certain.

BarCamp Web 2013 – 1ère journée

Comme nous l’avions déjà fait l’année dernière, nous retournons dans le nord Cotentin pendant quelques jours, loin des problèmes du quotidien. Objectifs de ce second BarCamp :

  • permettre à l’équipe de se former,
  • faire de la veille dans l’univers du Web, où le mouvement est continu,
  • pratiquer, mettre en oeuvre des technologies encore peu utilisées au quotidien.

Nous partons en fin de matinée et après avoir déjeuné sur Valognes, nous sommes accueillis au manoir de la Fieffe qui propose des chambres d’hôtes sur Cherbourg.

L’équipe se met au travail et très rapidement apparaissent les (36 !) sujets qui sont susceptibles d’êtres étudiés. Après hiérarchisation, les ateliers se mettent en place.

Définition des sujets en début de BarCamp

 

En fin d’après-midi, nous aurons l’occasion de visionner une vidéo concise mais précise d’introduction au lean. Ce sujet ayant été spontanément évoqué par deux personnes, le traiter était important.

Les présentations issues des autres ateliers seront présentés le lendemain.

 

BarCamp Web 2012 – le bilan

Après 3 jours de BarCamp, quels enseignements en tirer ?

Un format adapté

Le format semble parfaitement adapté : 3h30 de veille sur internet et 30 min. de présentation au reste de l’équipe. Les réflexes de binômage sont présents, la rédaction d’articles sur le blog permet de clarifier nos recherches et les transmettre (aux autres mais aussi dans le temps). Enfin, la mise en application sur nos vrais projets est un plus considérable.

Des objectifs atteints

Les objectifs de ce BarCamp de 3 jours sont non seulement atteints, mais même dépassés, puisque nous avons pu nous approprier les techniques et les technologies dont nous avons besoin au quotidien et, ce qui n’avait initialement pas été prévu, les mettre en oeuvre sur certains de nos sites internet qui sont déjà en ligne.

La dream team

 

Les avantages d’un BarCamp

Ils sont importants :

  • la possibilité pour toute l’équipe de participer à la formation en même temps,
  • le fait de pouvoir traiter sereinement les demandes urgentes émanant de l’entreprise et de pouvoir différer les autres,
  • la diversité des sujets traités : 32 articles en 3 jours !
  • un processus d’apprentissage actif et intensif,
  • le fait de pouvoir appliquer immédiatement le savoir acquis à des projets existants,
  • l’apprentissage de ce qui nous est réellement utile,
  • le fait de pouvoir travailler sur des technologies pour lesquelles les formations n’existent pas encore.

Un mode de travail à par entière ?

L’autre constat est que le fait de se « couper » de l’entreprise était indispensable. Il nous permet de bénéficier d’une bien plus grande disponibilité et donc efficacité pour ce travail de veille. Associé au fait que nous pouvons travailler partout où nous bénéficions d’une connexion internet et d’électricité, la question se pose de savoir si ce mode de travail ne mériterait pas d’être plus utilisé. Pas au quotidien mais par exemple en cas de pic de charge sur projet important.

Il existe une condition indispensable pour que cela fonctionne : les personnes doivent être motivées, pour ne pas dire passionnées par leur métier.

Les améliorations à apporter

Après un court débrief, voici les éléments qui ressortent :

  • les résultats de ces trois jours sont très intéressants et n’auraient pas pu être obtenu dans notre contexte de travail habituel,
  • d’un point de vue matériel un vidéoprojecteur, un amplificateur wifi ainsi qu’un serveur de tests seraient un plus appréciable,
  • les chambres d’hôte, avec une salle de travail, semblent être la bonne forme d’hébergement,

Merci aux collègues que nous avions prévenus et qui ont joué le jeu. Nous avons reçu beaucoup moins de mails et, bien que les lignes téléphoniques furent basculées sur nos portables personnels, beaucoup moins d’appels téléphoniques que d’habitude. Gageons que ce n’est que partie remise et qu’à notre retour nous aurons à traiter toutes les demandes ajournées.

Dans cette série : la première journée, la deuxième, la troisième et le bilan.

BarCamp Web 2012 – 3ième journée

Le matin après avoir répondu en urgence à une demande du service export, nous commençons nos travaux, avec :

La rédaction, la correction et la publication des articles en cours.

AJAX théorie, ce qui permettra d’améliorer l’expérience utilisateur.

AJAX selon JQuery, donc mise en application immédiate de ce qui a été vu précédemment.

CSS3 : l’avenir se conjugue au présent 😉

Débugage sur Rails, afin de gagner un peu temps.

Routes en rails, sujet abscons s’il en est.

La frise chronologique Facebook, encore lui 😉

Direction la Brasserie du Commerce.

Unique, Frédéric qui cale sur une entrée !

Et l’après-midi :

La gestion des dates sur Rails. parce que c’est toujours compliqué, les dates.

Aide mémoire sur les formulaires en Rails 3 afin d’éviter de perdre du temps.

Le e-commerce sur Facebook, un peu de veille, ne sait-on jamais.

Retour sur Caen peu après 18 h, un peu fatigués, mais contents !

Dans cette série : la première journée, la deuxième, la troisième et le bilan.

BarCamp Web 2012 – 2ième journée

P’tit déj. (avec Haddock qui ronfle toujours !) et c’est parti pour la matinée.

Mise en application du système de notation sur un projet de test, quasi immédiate, puisque la théorie fut traitée hier.

De nouveau le référencement naturel, dans la droite ligne de ce qui a été fait hier.

Nous avons continué à travailler sur git. Et enfin nous avons trouvé l’instruction magique qui va nous permettre d’utiliser pleinement cet outil très puissant, sans devoir l’attendre et l’attendre encore.

Un repas sur le pouce, dans le jardin, sous un magnifique soleil printanier 😉

Le repas dans le jardin

 

L’après-midi nous avons étudié :

  • HTML 5 un pied dans l’avenir, mais des éléments à utiliser dès à présent.
  • extraits enrichis. Ou comment améliorer notre référencement en fournissant toujours plus d’informations aux moteurs de recherche 🙁
  • git avec la confirmation par les chiffres de ce que nous avions découvert la matin.
  • vim, une bonne avancée qui nous fait prendre conscience de la puissance de cet outil.

La journée se terminera sous la verrière à refaire le monde 🙂

Comme à l'accoutumé Thomas fait la vaisselle !

Dans cette série : la première journée, la deuxième, la troisième et le bilan.

 

vim comme IDE – la suite

Après l’article d’hier, nous continuons  notre tour d’horizon de vim afin de le configurer comme IDE suite ce que nous avons défini comme fonctionnalités nécessaires.

la complétion automatique

Lors de la saisie sous vim, en tapant CTRL-P, il y a la proposition de complétion à partir des mots déjà présents dans le fichier, ainsi que les autres fichiers ouverts. C’est aussi possible à partir d’un fichier de mots clés (dictionnaire) qu’il est possible de configurer.

Autocomplétion de ligne avec un CTRL-X CTRL-L 🙂

Autocomplétion d’un nom de fichier présent sur le disque en local CTRL-X CTRL-F 🙂

source :

http://www.thegeekstuff.com/2009/01/vi-and-vim-editor-5-awesome-examples-for-automatic-word-completion-using-ctrl-x-magic/

transfert de fichiers

Ce sera git.

Parce que certains utilisent déjà vim comme IDE :

http://www.metal3d.org/index.php/blog/ticket/2008/12/08/vim-est-un-IDE-PHP

http://vim.wikia.com/wiki/Use_Vim_like_an_IDE

http://www.vim.org/scripts/script.php?script_id=1567

Allons plus loin

Avec la réalisation de plug-in afin d’ajouter de nouvelles fonctions :

Pour cela, créer un fichier dans le dossier ~/.vim/plugin/ par exemple (créer les dossiers s’ils n’existent pas) insérer le chargement de ce fichier dans le ~/.vimrc avec la ligne => :so chemin_absolu_du_fichier

Maintenant créer la fonction dans le fichier, comme ci dessous par exemple :

function! Creafichier()
execute « ! touch unfichier »
endfunction

Maintenant ouvrez un fichier avec vim et tapez « :call Creafichier() », ceci aura pour effet de créer un fichier comme si vous tapiez la commande « : ! touch unfichier » dans vim, ceci grâce à l’instruction execute qui imite le comportement de vim.

Git comme outil de sauvegarde

Git nous permet de réaliser nos sauvegardes et d’accéder facilement à l’historique de celles-ci. Cependant la taille des dépôts augmentent à une vitesse importante et ces dépôts ont tendance à « s’encrasser ».

L’objectif est d’alléger les dépôt. Après de multiples recherches, notamment  git gc, git rebase, nous trouvons notre bonheur avec :

git repack && git prune

Les dépôts se réduisent de manière importante et la vitesse des autres opérations est très accélérée !

http://www.unixgarden.com/index.php/gnu-linux-magazine/git-pour-les-futurs-barbus

vim comme IDE

Vim est un éditeur de texte extrêmement puissant et personnalisable, héritier direct de vi qui fut écrit en… 1976. C’est un logiciel libre, léger, très rapide et installé par défaut sur la plupart des distributions GNU/Linux. Son utilisation peut désorienter un nouvel utilisateur. Elle nécessite un certain apprentissage qui peut être « rentabilisé » si l’on utilise quotidiennement un éditeur de texte.

Nous ne reviendrons pas sur l’utilisation de base de Vim. Quoique…

Comment configurer vim afin qu’il réponde à nos attentes comme IDE ?

La coloration syntaxique

Tout a déjà été écrit :

http://appendrelibrement.wordpress.com/2011/03/04/vim-coloration-syntaxique/

Edition de plusieurs fichiers et multifenêtrage

http://appendrelibrement.wordpress.com/2011/03/04/vim-split/

et la gestion des onglets :

http://vim-fr.org/index.php/Commandes_de_bases#Onglets

c’est à ce moment, et à ce moment seulement ;-), que la souris peut-être intéressante :

:set mouse=a

en direct ou dans .vimrc

La recherche sous vim

http://vim-fr.org/index.php/Commandes_de_bases#Recherche

Dasn un répertoire (projet), nous utiliserons la commande système grep.

:!grep -rn titi *

:! => exécuter commander depuis le shell, -r récursif, -n afficher le numéro de la ligne, * dans tous les fichiers du répertoire en cours.

Identation

Dans vimrc :

indentation de 2 et non comme par défaut de… 8.

Remplace le tab, par des espaces.

Indente automatiquement comme la ligne précédente. Des modes d’indentation plus puissants existent.