PROJET AUTOBLOG


Marien Fressinaud

Site original : Marien Fressinaud

⇐ retour index

Mise à jour

Mise à jour de la base de données, veuillez patienter...

Conception de la v8 du site

vendredi 1 mars 2019 à 13:20

Au fil des années, j’ai pris le temps d’annoncer les changements importants du site, je ne vais donc pas non plus déroger à la règle cette fois-ci. Cette huitième version (quand même) arrive presque deux ans après la dernière. C’est avant tout pour moi un retour au « fait-maison » qui était la base lorsque j’ai démarré. J’avais été lassé de maintenir des outils souvent complexes ; la cinquième version introduisait notamment une idée un peu fumeuse consistant à agréger les éléments que je partageais via 3 outils que j’avais moi-même développé…

En revenant à un outil plus simple (je vous renvoie à ma série d’articles), je reviens aussi à une idée de l’informatique qui me plaît : maîtriser (ou au moins comprendre) les outils que j’utilise.

Cet article, donc, revient sur les grandes lignes directrices que j’ai souhaitées pour cette énième version de mon site. Notez que le contenu n’est pas terminé, il manque notamment le manifeste qu’il me reste à rédiger et la liste des projets que je souhaite mettre en avant. J’envisage aussi une page « à propos » mais je ne suis pas certain de son intérêt.

Une approche pédagogique et ouverte

Si j’ai toujours tenté d’adopter une démarche pédagogique, je crois que je commence à avoir une certaine maturité sur le sujet. La série d’articles dans laquelle s’inscrit celui-ci en est la preuve la plus évidente puisque j’y explique toute la démarche qui se cache derrière ce site. Un autre exemple que j’aime bien est celui de la partie « Traitement des données » de ma page « Mentions légales » dans laquelle j’explique que malgré le fait que je ne collecte pas de données… et bien j’en collecte quand même ; j’en profite pour expliquer la raison et les circonstances.

Le côté ouverture est quant à lui illustré par les liens qui renvoient à chaque fois vers les articles qui décrivent la raison de tel ou tel paragraphe, ou pour compléter en informations. J’ai aussi insisté sur les liens renvoyant au code source. J’envisage, pour aller plus loin, d’ajouter pour chaque page des liens discrets vers les fichiers sources correspondants.

L’une des conséquences de cette approche est que cela rend le site plus verbeux. C’est voulu. Celleux qui me connaissent savent que j’écris facilement de gros pavés et cela fait partie intégrante de qui je suis, j’assume. Pour équilibrer cela, j’ai appliqué une série de bonnes pratiques de typographie pour que le contenu reste agréable à lire, notamment le principe du « triangle équilatéral du paragraphe parfait » (c’est-à-dire équilibrer la taille de la police d’écriture avec la largeur et l’espacement des lignes). Le choix de couleurs qui contrastent bien entre elles a pris un peu de temps, mais l’outil d’accessibilité intégré à Firefox a été d’une aide précieuse.

Capture d’écran qui montre que le ratio de contraste du titre de cet article avec l’arrière-plan est de 14,32

Le but de tout cela est aussi d’apposer une « patte » particulière sur mon site, pour faire en sorte que la forme du blog épouse le fond de ce que je veux promouvoir.

Navigation restreinte

Deux choses m’agacent souvent dans la navigation des sites :

Pour cette nouvelle version du site, la navigation se passe en majorité « dans le texte ». C’est-à-dire que la majorité des liens vers les autres pages sont (ou seront) contextualisés au sein du texte de la page d’accueil. Dans l’en-tête du site, seulement deux liens : l’un pour revenir à l’accueil, l’autre pour accéder au blog (qui reste le « lieu de vie » du site). Cette économie de navigation m’évite en plus le fameux menu « hamburger ».

Conscient que ce type de navigation est là encore verbeux, les différents liens sont accessibles depuis le pied de page pour avoir une vue d’ensemble du site.

Le dernier élément de navigation présent sur le site est le bouton qui apparaît en bas de la page une fois que vous l’avez faite défiler un peu et qui permet de remonter en haut de la page. Pour le créer, je me suis basé sur un article de Signal v. Noise. J’ai dû légérement adapter le code qui s’appuie sur leur cadriciel JavaScript, ce qui donne un petit script d’une dizaine de lignes. Le code CSS quant à lui est un peu plus long, mais principalement pour l’apparence.

Un thème moins bleu

Le thème de ce site a toujours été bleu, voire très bleu. Chose révolue donc puisque je suis parti sur du rouge brique (il y aura bien quelqu’un·e pour me dire que c’est orange, non ? /private-jock). Pourquoi ce rouge ? Pas de raison particulière pour le coup, ça ne transmet pas de message particulier. On pourra toujours disserter sur la signification des couleurs qui irait, dans le cas présent, à l’encontre de ce que je veux transmettre ; mon pari est que ça ne joue qu’à la marge et qu’on peut bien choisir un peu les couleurs que l’on veut tant qu’elles nous plaisent ! Si quelqu’un vient argumenter sur le fait qu’il trouve le thème agressif, je reconsidèrerai toutefois volontier mon sentiment.

La « charte » se décline ainsi :

La règle est de ne jamais superposer deux couleurs différentes, à part la couleur de contraste qui est prévue pour cela (son ratio avec les autres couleurs est suffisant pour assurer une bonne lisibilité).

Mobile avant tout

J’ai pensé le site pour fonctionner sur mobile. Même si je n’utilise plus que très peu le téléphone pour aller sur Internet, il est toujours plus agréable de naviguer sur les sites prévus pour (c’est quand même l’une des promesses des technologies web, de pouvoir être accessibles quel que soit le périphérique).

Pour cela j’ai utilisé le mode « mobile » de Firefox (le raccourci pour l’utiliser est ctrl+maj+M). J’ai commencé par faire en sorte de supporter la largeur d’écran la plus petite que je souhaitais pouvoir gérer (360 pixels), puis j’ai ajouté quelques points de « rupture » (c’est-à-dire des largeurs d’écran pour lesquelles le style doit changer). Par exemple, pour les blocs des séries sur la page de blog, les blocs sont affichés en colonne par défaut :

.blog-series {
    display: flex;
    flex-direction: column;
}
.blog-serie {
    margin-bottom: 1rem;
}

Ce qui donne :

Capture d’écran de la page principale du blog où l’on voit les blocs des séries en colonne

Mais à partir d’une largeur de 40rem (qui correspond à 640 pixels dans ce cas), on les affiche en lignes avec retour à la ligne autorisée.

@media(min-width: 40rem) {
    .blog-series {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .blog-serie {
        width: 30%;
        margin-right: .5%;
        margin-left: .5%;
    }
}

Ce qui donne donc :

Capture d’écran de la page principale du blog où l’on voit les blocs des séries qui sont passés en lignes

Mise en production imminente

Ayant suffisamment repoussé la mise en production jusque-là, j'envisage de le faire dès la semaine prochaine même si je n’ai pas tout à fait fini le contenu du site. Tout viendra en temps et en heure. J’ai pu tester que l’importation des articles de l’ancien site se faisait sans soucis. À part quelques flux RSS, les liens ne devraient donc pas se casser.

Vous pouvez donc supprimer ce site de votre agrégateur de flux RSS et repasser sur celui du site initial, tous les articles y seront transférés.

Construire un site complet à base de Boop!

mardi 26 février 2019 à 09:30

Après une petite pause d’un mois sur la refonte de ce site, il est temps pour moi de m’y remettre. La dernière phase avait consisté à imaginer un prototype pour me donner une vision globale de l’architecture du site. Cela devait aussi me permettre de pointer du doigt les manques de Boop!, mon générateur de sites statiques. Et il y en avait, des manques ! Je reviendrai prochainement sur les évolutions du contenu du site ainsi que sur son habillage (qui n’est d’ailleurs pas terminé). Pour l’instant je vais me contenter de détailler les dernières évolutions techniques.

Des améliorations dans le processus de développement

L’une des choses qui me tenait à cœur avec Boop! était de pouvoir travailler de la manière la plus agréable possible sur mon site. Le mieux dans cette situation étant de s’observer râler.

Premièrement, lors de la génération du site, je voulais pouvoir ouvrir rapidement les fichiers générés. Comme la plupart du temps je travaille sur un article, je veux pouvoir l’ouvrir immédiatement. J’ai donc fini par afficher le nom des fichiers dans la console, et comme il s’agit de chemins absolus commençant par file://, je n’ai plus qu’à cliquer dessus pour ouvrir mon article. Une exécution de Boop! ressemble grosso-modo à ça :

[marien@pizza marienfressinaud.fr]$ boop.py --development
Written page: file:///home/marien/marienfressinaud.fr/site/index.html
Written page: file:///home/marien/marienfressinaud.fr/site/blog.html
Written article: file:///home/marien/marienfressinaud.fr/site/construire-un-site-complet-a-base-de-boop.html
Written article: file:///home/marien/marienfressinaud.fr/site/suivre-le-boop-blog.html
Written article: file:///home/marien/marienfressinaud.fr/site/simplifier-la-redaction-darticles-dans-boop.html
Written article: file:///home/marien/marienfressinaud.fr/site/boop-une-introduction.html
Written feed: file:///home/marien/marienfressinaud.fr/site/feeds/all.atom.xml
Static files copied
Boop!

Ici vous ne pouvez évidemment pas cliquer sur les noms des fichiers, mais ça fonctionne dans un terminal.

À noter que lorsque je génère les fichiers pour la mise en production, ce sont les URL finales qui sont affichées (voir le code), ce qui me permet d’ouvrir l’article directement une fois en ligne.

Le deuxième point agaçant était que je devais quitter mon éditeur de texte régulièrement pour générer les fichiers et vérifier que le résultat me convenait. Lors de la phase de relecture d’un article par exemple, je peux vouloir regénérer le site plusieurs fois en quelques secondes : passer de la fenêtre de mon éditeur à celle de mon terminal pour revenir de nouveau à l’éditeur est très pénible. Utilisant Vim, j’ai ajouté deux raccourcis dans mon .vimrc : l’un pour générer le site (,,) et un autre pour publier le site en ligne (,p).

autocmd BufRead,BufNewFile */*marienfressinaud.fr/* nnoremap <leader><leader> !boop.py --development<CR>
autocmd BufRead,BufNewFile */*marienfressinaud.fr/* nnoremap <leader>p make publish<CR>

Habituellement les générateurs de sites statiques proposent un serveur surveillant les changements faits dans les fichiers et qui les regénère à la volée… mais je trouvais cette solution bien compliquée pour un intérêt limité. Cela me permet aussi de garder Boop! concentré sur une seule tâche : générer un site statique.

Enfin, notons que je dispose d’un fichier Makefile dans le répertoire du site qui me permet d’effectuer des tâches usuelles de manière unifiée :

$ make boop    # génère le site en mode développement
$ make publish # génère le site en mode production et le téléverse sur le serveur
$ make clean   # nettoie le répertoire `site`
$ make open    # ouvre la page d'index du site dans le navigateur
$ make tree    # affiche la structure des fichiers en excluant le répertoire `site`

Une réécriture partielle de Boopsy

Si vous vous souvenez, Boopsy est mon système de template maison. Jusque-là, il se contentait d’afficher des variables au sein de fichiers HTML. Cependant, j’ai très vite eu besoin de pouvoir écrire des conditions (if) et des boucles (for). Ces structures ont cela de particulier qu’elles ont un impact sur la portée des variables. La boucle en particulier pose un problème, par exemple dans le cas suivant :

{% for article in liste_articles %}
    <div>{{ article.title }}</div>
{% endfor %}

Avant d’entrer dans la boucle for, la variable article n’existe pas, il faut donc gérer le contexte. L’article sur lequel je me base depuis le début gère cela de manière relativement maline : il transforme le template en mini-programme Python. Le for est donc transformé en syntaxe Python, ce qui permet de déléguer la gestion de la portée des variables à l’interpréteur de ce dernier. J’avais fort justement décidé de ne pas partir sur cette solution initialement (ne la comprenant pas, j’étais allé au plus simple), et j’ai donc réécrit en partie ce que j’avais fait.

Une fois ce travail fait, l’ajout du if et du for a ensuite été très facile vu que je n’avais plus qu’à traduire le code récupéré depuis le template en code Python.

L’apparition des pages…

J’en avais besoin pour avancer : les pages ont été ajoutées très rapidement après mon dernier article. Jusque-là, je ne pouvais avoir qu’une unique page (d’accueil) et des articles. Pourtant, les pages statiques sont bien pratiques pour donner des informations « intemporelles ».

Contrairement aux articles, les pages sont écrites exclusivement en HTML et se trouvent dans un répertoire qui se nomme… pages. Elles peuvent partager elles-aussi un template commun (voir le code).

Le problème auquel j’ai alors fait face a été de pouvoir définir des variables dans les pages pour pouvoir les utiliser dans le template. En effet, le HTML ne permet pas de définir de variables. Je suis donc parti sur la solution utilisée par Jekyll, celle d’accepter un en-tête YAML en haut des fichiers HTML. Je trouvais cette solution d’autant plus élégante qu’au final il s’agissait de la même façon de faire dans les fichiers Markdown.

… d’une page de blog…

Une fois tout cela en place, je n’avais plus grand chose à faire pour avoir le site de mes rêves. Une chose toutefois continuait de m’embêter : je devais lister les articles à la main, un par un, manuellement sur une page de blog.

Disposant désormais de tout ce qu’il me fallait pour construire une liste d’articles automatiquement, il m’a fallu très peu de temps pour ajouter une page de blog générée par Boop!.

… et des séries.

La dernière fonctionnalité que j’ai développée a été celle des « séries ». Une série est une sorte de catégorie regroupant une liste d’articles. La différence avec le système de catégories que l’on peut retrouver ailleurs est que la série liste les articles dans un ordre décidé par l’auteur. C’est-à-dire, dans mon cas actuel, du plus ancien au plus récent (l’inverse donc de la page de blog). Mais on pourrait imaginer que cet ordre soit encore différent ; c’est à l’auteur de voir ce qu’il préfère.

La conséquence de cela est que les liens vers les articles sont aujourd’hui à faire manuellement sur les pages des séries (c’est dommage alors que je viens de vanter les mérites de l’automatisation dans la partie d’avant). J’envisage toutefois un système un peu plus sympathique à terme, sans perdre pour autant en flexibilité.

Une série dispose aussi d’un flux Atom spécifique, de la même manière que les catégories dans Pelican. Je sais qu’ils étaient utilisés sur mon ancien site (pour Lessy notamment), je voulais donc retrouver ce système sur le nouveau. Dans le flux, les articles continuent par contre d’être listés du plus récent au plus ancien.

Une série est créée en regroupant des articles dans un répertoire et en créant une page nommée serie.html dans ce répertoire (voir l’exemple du « Boop! blog »).

Et une grosse réorganisation du code

Vous vous doutez que tous ces changements ont apporté leur lot de dette technique et le fichier presque unique qui contenait le code de Boop! commençait à devenir hors de contrôle (500 lignes de code dont 220 pour la seule fonction principale). Il était grand temps de faire quelque chose, mais pas n’importe comment.

Une chose que je n’aime pas quand je lis le code d’une autre personne, c’est lorsqu’il y a des indirections dans tous les sens et que je dois ouvrir 5 fichiers pour comprendre ce qu’il se passe. Dans mon cas, je voulais que le fichier principal contienne l’ensemble de la logique métier, c’est-à-dire :

  1. chargement de la configuration du site ;
  2. collecte de l’ensemble des articles et des pages ;
  3. écriture des articles et des pages ;
  4. écriture des flux Atom (le principal ainsi que ceux des séries) ;
  5. copie des fichiers contenus dans static.

Ensuite, les fonctions qui ne revêtent pas un caractère important dans la logique métier sont extraites vers un fichier utils.py. Ce fichier apporte néanmoins des informations importantes quant au fonctionnement de Boop!.

Les derniers fichiers quant à eux contiennent quelques classes utiles au fonctionnement, notamment Article, Page et Feed.

Pour les plus curieuses et curieux d’entre vous, vous pouvez retrouver les différents commits de cette réorganisation de code de cette manière :

$ git clone git@framagit.org:marien.fressinaud/boop.git && cd boop
$ git log --reverse --oneline 694c4e3f..7bfac8f4
e3c382a Move extension filtering in utility functions
9a2c645 Extract function to build an article from filepath
...
7bfac8f Refactor feeds generation
$ git show [le commit que vous voulez voir]

Je pense toutefois que l’intérêt reste limité, mais c’est vous qui voyez si ça vous intéresse.

Un outil taillé au poil

Boop! a cela de bien qu’il fait très exactement ce dont j’ai besoin : pas une fonctionnalité n’est superflue. Et s’il manque très certainement des choses, ce sont pour d’autres besoins que les miens. Alors, oui, ça m’a pris un certain temps à développer ; je ne conseille évidemment pas à tout le monde de développer son propre générateur de sites statiques. Il y avait avant tout une visée pédagogique dans ma démarche, en montrant comment en partant de zéro on peut concevoir un outil qui fonctionne tout aussi bien qu’un « plus connu ». J’ai d’ailleurs pris le soin au fur et à mesure de l’article (ainsi que des précédents) d’ajouter des liens vers les commits correspondants à ce dont je parlais, pour comprendre « comment j’ai fait ». Je voulais aussi montrer qu’en restant le plus simple possible, on obtient une meilleure maîtrise sur l’outil et on peut le faire évoluer plus facilement. On favorise ainsi la liberté 1 du logiciel libre.

Boop! n’est pas pour autant totalement terminé. Il me reste à l’utiliser régulièrement sur une longue période de temps, comprendre là où ça bloque, fluidifier mon processus de travail, fignoler les morceaux de code toujours pas très élégants, améliorer la documentation que je n’ai jamais pris le temps de structurer correctement… Cela pourrait presque être comparé à du travail d’orfèvre à ce niveau de précision, mais j’aime être pointilleux quand je peux me le permettre. Et je peux.

Introspection professionnelle : communication et site

vendredi 11 janvier 2019 à 11:45

Pour ce dernier article de mon « introspection professionnelle », je vais aborder le sujet de la communication et dessiner une esquisse de ce que sera l’architecture du site. Pour rappel, le premier article définissait mes valeurs et ma raison d’être, tandis que le second décrivait les compétences que je souhaite appliquer dans mon futur métier ainsi que l’objectif que je me fixe.

Les choses commencent doucement à se clarifier pour moi, ce troisième article aborde enfin la phase concrète de la démarche et les premiers traits du site seront tirés dans la dernière partie. J’ignore encore qu’elles seront les missions sur lesquelles je serai amené à travailler, mais l’accueil qui a été réservé à mes deux premiers articles me conforte dans la voie que j’ai commencé à emprunter.

Différents supports pour communiquer

J’ai commencé à me poser la question du support de communication lorsque j’ai réalisé la diversité des médias que j’utilisais jusque-là : mon site évidemment, Twitter, Mastodon, Diaspora* (plus trop maintenant), mais aussi GitHub, sans compter les différents blogs ou espaces où j’ai été amené à écrire au compte-goutte. Je me posais régulièrement la question de quelle information devait être partagée où et sur quel ton. Il est grand temps de remettre tout cela à plat.

Pour commencer, parlons de ce dont je ne veux plus avoir à m’occuper : GitHub et Gitlab, et en particulier du premier. Il s’agit là de forges logicielles, c’est-à-dire d’espaces où l’on dépose du code source, agrémentés d’outils pour contribuer à ce code (notamment un bugtracker ainsi qu’un système de pull requests permettant de proposer des modifications du code). Mais ce n’est pas tout : GitHub en particulier n’est pas une simple forge, ce qui en fait sa force se trouve aussi dans ses aspects communautaires. On y met en avant les projets sur lesquels on travaille, notre activité quantifiée sous forme de beaux diagrammes et on peut même suivre ou être suivi par d’autres développeurs et développeuses pour voir ce qu’ils font. Gitlab est sans doute légèrement moins orienté vers cela, mais intègre tout de même certains de ces méchanismes. Le défaut de ces deux plateformes, c’est qu’elles sont orientées exclusivement vers le code, vers la technique. Si vous avez suivi mes articles précédents, vous aurez compris que cela m’intéresse assez peu au final. Quantifier le nombre de lignes de code ou de tickets que j’ai ouverts ne m’intéresse pas, cela flatte tout juste l’égo lorsque l’on est « productif ». Utiliser GitHub ou Gitlab pour communiquer m’apparaît donc comme trop restrictif et orienté vers un but qui n’est pas le mien. Je ferai donc désormais le minimum pour maintenir mes profils à jour sur ces plateformes.

Ensuite, le couple Twitter / Mastodon est légèrement plus compliqué. Ces deux médias sociaux se ressemblent énormément dans leur mode de fonctionnement (c’est-à-dire le partage de courts messages instantanés). Toutefois, Mastodon possède une communauté plus petite et plus ouverte où l’on trouve des personnes avec qui échanger de façon plus proche. Twitter me fait l’impression d’une population très (trop ?) hétérogène, où n’importe qui peut s’immiscer dans une conversation dans laquelle il n’est pas le ou la bienvenu·e (et s’y accrocher en plus, le bougre !) Dans les deux cas, l’argumentation est compliquée de part la limite du nombre de caractères dans les messages (280 sur Twitter, 500 sur Mastodon), alors autant privilégier la plateforme qui offre le cadre le plus accueillant pour échanger. Par conséquent, j’utiliserai Mastodon pour partager des choses professionnelles et plus personnelles. Je conserverai toutefois mon compte Twitter pour partager des choses exclusivement professionnelles et pour continuer ma veille de l’actualité. Quant à mon compte Diaspora* qui est à l’abandon depuis un moment, il risque de disparaître pour de bon un de ces jours.

Le dernier support de communication d’importance que je souhaite utiliser est bien entendu mon site Internet. Je le souhaite au centre de mes partages, en espérant écrire plus qu’auparavant (la fin de l’année 2018 m’a montré que j’en étais capable). Je détaille plus en détails comment j’imagine mon site dans la dernière partie de cet article.

Les petits à-côtés de la communication

En travaillant les supports de communication, quelques éléments sont ressortis que je n’ai pas encore traités.

En premier lieu, le CV est un support que je trouve intéressant. Il est surtout utilisé pour postuler en tant que salarié, mais aussi pour faire de la prestation chez des clients. J’aime bien y jeter un coup d’œil pour savoir comment les gens se présentent de manière succincte. D’un point de vue plus personnel, je trouve qu’il s’agit d’un exercice de synthèse assez intéressant et j’aime bien me limiter à une page A4 bien qu’aujourd’hui j’aurais sans doute matière à déborder un peu. Il ne s’agit toutefois pas d’un besoin urgent, bien que je m’y pencherai sans doute avec intérêt d’ici quelques mois.

Un autre sujet facultatif dans l’immédiat est celui des cartes de visite. Je vais sans doute rencontrer des gens qui chercheront à me contacter et la carte est dans ces cas-là intéressante pour donner les informations essentielles. Je devrais toutefois être capable de découper un bout de papier dans un coin de nappe et y écrire mon nom ainsi qu’une adresse courriel. Il manquera l’aspect « objet à collectionner », mais je suis persuadé que les gens sauront s’en passer. La fin du monde est pour demain après tout.

En parlant d’adresse courriel, se pose la question du moyen de me contacter. Je ne privilégie pas Twitter et je risque d’oublier des choses si les gens me contactent par Mastodon. De plus, j’aime centraliser ma correspondance, et le courriel est idéal pour cela. Ainsi, je compte mettre en évidence sur mon site une adresse unique pour me contacter. Certains préfèrent passer par un formulaire pour éviter que des personnes ne récupèrent leur adresse et limiter ainsi le spam, mais la mienne traîne déjà depuis plusieurs années sur mon site et j’arrive à peu près à limiter le spam. Je me suis aussi posé la question de proposer un numéro de téléphone, à Sogilis cela était fait car certains clients appellent plus volontiers qu’ils ne rédigent un courriel. Le téléphone est toutefois pour moi un élément relativement intrusif de par la présence physique qu’il requiert et je le réserve à un cadre privé.

Enfin, le dernier sujet que je souhaitais aborder est la photo de profil. Si je ne compte pas en mettre une en évidence sur le site, j’apprécie toujours de pouvoir me faire une idée du visage d’une personne avant de la rencontrer, ne serait-ce que pour la reconnaître plus facilement. La photo que j’utilise aujourd’hui commence à dater un petit peu, et les personnes qui m’ont croisé récement seront sans doute d’accord pour dire qu’elle n’est plus vraiment au goût du jour. J’ai vu à plusieurs reprises le conseil de passer par un photographe professionnel, mais je vais encore laisser le sujet de côté quelques semaines avant de me décider sur ce que je fais.

L’architecture du site, pour me représenter

Mon futur site aura deux objectifs : me servir de vitrine professionnelle (et donc me présenter) et à partager ce sur quoi je travaille. La structure de base de la page d’accueil que j’envisage n’a rien de très originale :

  1. présentation en une phrase de qui je suis, ainsi que mise en avant de mon objectif ;
  2. énumération de mes compétences pour indiquer sur quoi je peux travailler et comment ;
  3. présentation de mon manifeste pour mettre en évidence mes valeurs et préciser que je ne travaille pas sur n’importe quoi ;
  4. indication de mon adresse courriel ainsi que les médias sociaux sur lesquels on peut me trouver ;
  5. enumération des projets sur lesquels j’ai travaillé et que je souhaite mettre en avant (limités à environ 5) ;
  6. enfin, un pied de page pour servir de rappel (liens vers les différentes pages du site, rappel des informations de contact, etc.)

Il existera des pages supplémentaires pour détailler certaines parties, notamment mes compétences et mon manifeste (qu’il me reste à écrire !) J’intégrerai aussi au niveau de la liste des projets, un lien amenenant vers ma page « now » que je tiens à jour pour indiquer ce sur quoi je travaille en ce moment.

J’aimerais limiter le nombre de liens dans la barre de navigation en haut de la page, et je me contenterais d’ailleurs bien d’un simple lien vers le blog. Au passage, j’essayerai d’effacer la frontière qui peut exister habituellement entre la partie site et le blog. Il paraîtrait en effet logique qu’un lien partant de la liste des projets amène vers une série d’articles liée à un projet en particulier. La page de blog en elle-même se contenterait de présenter la liste complète des articles, mais deviendrait optionnelle pour accéder aux articles. Je souhaite de ce fait les placer dans leur contexte.

Afin d’illustrer ce vers quoi je veux tendre, j’ai créé une page de démonstration relativement complète. Avec cela, j’ai déjà une bonne base de travail pour avancer rapidement. Il me reste encore pas mal de contenu à écrire et Boop!, mon générateur de sites statiques, va encore devoir évoluer un peu, mais je peux dorénavant envisager une mise en ligne à la fin du mois.

Introspection professionnelle : compétences et objectif

mercredi 2 janvier 2019 à 15:15

En 2019, je change de vie professionnelle. Afin d’accompagner ce changement, je souhaitais entreprendre la refonte de mon site pour qu’il mette mieux en avant mes aspirations. Dans mon précédent article, j’ai décrit mes valeurs et ma raison d’être (c’est-à-dire ce qui me motive au quotidien), à travers une démarche d’introspection professionnelle. Pour rappel, les différentes étapes que je prévois dans le cadre de cette démarche sont :

  1. définition de mes valeurs ;
  2. définition de ma raison d’être ;
  3. définition de mes compétences ;
  4. établissement d’un objectif personnel ;
  5. définition de mes moyens de communication ;
  6. conception de l’architecture du site.

Les deux premiers points ont donc été détaillés dans le précédent article, je vais désormais aborder les deux points suivants, à savoir mes compétences et mon objectif personnel afin d’étudier comment je compte mettre en œuvre ma raison d’être. Dis autrement, je vois mes compétences comme des outils à mon service pour atteindre un objectif qui saura satisfaire ma raison d’être et mes valeurs.

Aujourd’hui mes compétences sont essentiellement techniques, orientées spécifiquement dans le développement web. À ce niveau-là, je suis plutôt polyvalent et capable d’apprendre assez aisément. Ce qui m’importe toutefois aujourd’hui concerne plutôt le champ de compétences que je souhaite être capable de couvrir en totale autonomie. J’ai relevé trois points principaux (vous remarquerez que j’aime bien ce chiffre !) ainsi que quatre transversaux pour arriver à un total de sept compétences que je pourrai mettre en œuvre au sein d’un projet.

Des compétences fondamentales pour définir mon métier

Tout d’abord, je souhaite monter en compétences dans le domaine de l’acquisition des besoins métiers orientés utilisateurs. Je pense que c’est une démarche saine que de d’abord chercher à comprendre les enjeux d’un métier et en mesurer sa complexité avant de développer une solution logicielle. Cela permet notamment d’être force de propositions pertinentes. J’ai par ailleurs trop souvent vu des clients qui fonçaient bille en tête avec une idée bien définie, sans questionner les usages des autres utilisateurs et utilisatrices. J’ai dans ces moments-là eu l’impression de ne développer que pour une personne et que l’outil ne serait jamais pleinement utilisé ou adopté. Je crois que ce n’est pas une démarche toujours évidente que de questionner un client sur ce qu’il a muri en lui-même, en particulier en tant que développeur, et de lui faire comprendre que sa solution n’est pas forcément la meilleure pour tout le monde. Il sera essentiel que je sache établir une confiance quant à ma capacité à comprendre le métier.

Ensuite, la deuxième compétence que je saurai mettre en pratique au sein d’un projet est celle du développement logiciel. Comme je le disais plus haut, il s’agit d’un domaine où je suis polyvalent et capable d’apprendre ; c’est le cœur de mon expertise aujourd’hui. Je suis à l’aise à la fois en frontend comme en backend. Je connais un certain nombre de bonnes pratiques en matière de déploiement automatisé/continu et connais relativement bien les problèmes qui peuvent se poser aux administrateurs système. J’essaye notamment de mettre en pratique les recommandations de la méthodologie « The Twelve-Factor App ». Ainsi, lorsque je développe une fonctionnalité, je pense à ce qu’elle deviendra une fois en production. Dans cette optique, j’essaye aussi de faire en sorte que ce que je développe arrive le plus rapidement possible en production afin d’éviter un décalage trop important entre mon code et la base initiale. En terme de langages, cela a relativement peu d’importance pour moi vu que je suis capable d’apprendre si la situation le demande. J’ai toutefois plus d’expérience en Ruby (très orienté Ruby on Rails), Python, JavaScript et PHP. Il s’agit là de compétences que je maîtrise suffisamment pour être autonome sur un projet sans aucun soucis. Bien entendu, mon code s’accompagne de tests et je fonctionne souvent en TDD (pour Test-Driven Development). Par ailleurs, j’ai un attachement particulier aux logiciels simples, qui ne cherchent pas à faire trop de choses et dont on peut fouiller le code pour y trouver rapidement ce que l’on cherche.

Enfin, la dernière compétence fondamentale que j’aimerais mettre en application au sein des projets où j’aurai à intervenir porte sur l’accompagnement à la mise en place d’une méthodologie documentaire. J’en parlais lorsque je détaillais mes valeurs, la transmission des connaissances est primordiale pour qu’un groupe ne dépende pas de quelques personnes clés. Je crois qu’il y a aujourd’hui un manque énorme de culture écrite dans nos modes de fonctionnement (je l’ai retrouvé à différents niveaux professionnel et associatif) ou alors cette culture n’est pas orientée vers le partage et la conservation des connaissances. C’est un sujet que j’ai commencé à toucher du doigt et sur lequel j’aimerais véritablement progresser. Et pour progresser, rien de tel que de pratiquer. Les wikis et les blogs sont pour moi deux outils très puissants dans cette recherche du partage mais qui ont le défaut de figer la connaissance à un instant T. J’aimerais étudier des modes de fonctionnement qui font vivre cette connaissance, qui lui permettent véritablement d’évoluer dans le temps et qui replacent la documentation au centre des préoccupations.

Des compétences transverses, au bénéfice des projets

En plus des trois compétences fondamentales listées au-dessus et qui forment un tout dans la vie d’un projet, j’ai voulu ajouter quatre compétences que je peux appliquer de façon générale sur tout type de projet.

Tout d’abord, une communication que je décrirais de transparente. Je parlais plus haut de confiance à établir avec les client·es, cela passe avant tout par la communication (écrite comme orale). Il est notamment important de ne pas cacher des éléments dont on pourrait avoir « honte ». Par exemple, la production est tombée, on l’a réparée en catimini sans que la cliente n’en sache rien mais on la tient quand même informée de ce qu’il s’est passé, par transparence. Savoir communiquer peut notamment servir à désamorcer des sujets qui pourraient être tabous et donc dangereux dans la vie d’un projet. Afin de communiquer de façon efficace, j’essaye de me placer tout d’abord dans une position d’écoute. Cette position me sert à comprendre mon interloteur ou interlocutrice, comprendre comment il ou elle intéragit avec moi, quel degré de familiarité je peux me permettre, si elle est sensible à mon argumentaire ou s’il est plutôt fermé à des approches différentes. Ce n’est pas toujours chose aisée, mais en exprimant aussi ce que l’on ressent, en partageant les doutes qui peuvent surgir en nous, on arrive à poser un terrain propice à la collaboration.

La deuxième compétence dont je pense pouvoir tirer partie est ma capacité à rendre compte de façon claire et argumentée un travail que j’ai produit. Que ce soit à l’oral ou à l’écrit, j’essaye toujours de me rendre compréhensible et je n’hésite pas à reformuler si je sens que je ne suis pas clair. Cela peut toutefois me demander un certain temps de préparation pour me laisser le temps de répéter ou de me relire au minimum deux à trois fois. Je suis par ailleurs très attaché à la pratique de la langue française et j’aime jouer sur les nuances que peuvent porter des mots ou la construction d’une phrase. Cela peut paraître anecdotique vis-à-vis d’autres compétences, mais j’ai réalisé il y a peu que le fait de savoir exprimer correctement ses idées joue un rôle très important dans la façon dont on est perçu par les autres. Cela affecte notre capacité à convaincre et à être suivi.

Ensuite, la gestion de projet intervient à tout les instants d’un projet. Afin d’être efficaces, il me semble que les méthodes agiles sont idéales. Je n’ai commencé à pratiquer qu’en arrivant au sein de Sogilis où j’ai pratiqué un mélange de Scrum et d’Extreme programming, mais j’ai très rapidement saisi un certain nombre d’avantages que ces pratiques offraient. Ce que j’en retire avant tout, c’est le fait de partir du constat que nos méthodes de travail ne fonctionneront pas parfaitement au démarrage d’un projet, et donc d’intégrer dans le processus de travail les outils qui permettront d’améliorer et corriger le processus lui-même, en cours de route. De plus, et cela rejoint mon premier point, la communication est placée au centre des préoccupations ce qui permet une bonne compréhension des enjeux par tout le monde et facilite la détection des problèmes qui ne manquent pas d’arriver au fil de l’eau. Les méthodes agiles offrent donc un cadre sain et malléable pour gérer et faire vivre un projet, elles seront donc au cœur de ma façon de travailler.

Enfin, le dernier point que je souhaitais aborder est l’intégration aux équipes. Il est pour moi important de faire partie d’une équipe et de ne pas travailler dans mon coin. Cela aide à mieux communiquer (encore !), à partager les connaissances pour ne pas devenir indispensable et à améliorer la qualité du produit final. La confrontation des points de vue sur un sujet donné, un bout de code par exemple, aide à penser un problème sous différents angles et prendre du recul sur ce que l’on fait. Je n’ai quasiment jamais travaillé ces trois dernières années tout seul sur un projet, et même sur Lessy qui reste un projet très personnel, j’ai eu à cœur de demander conseil autour de moi. Je pense être capable de m’intégrer facilement à une équipe, mais cela dépend aussi beaucoup des personnalités au sein de l’équipe ; je ne saurais donc en faire une règle absolue.

Un objectif au service de ma raison d’être

Arrive donc le moment où je dois résumer les quelques 3 200 mots de mes deux articles abordant mon introspection professionnelle ainsi qu’un an de réflexions plus ou moins poussées, en une phrase d’accroche qui définira la façon dont je veux aborder mon travail durant les prochains mois et/ou prochaines années.

Après plusieurs reformulations, je suis arrivé à déterminer un objectif qui me convient plutôt bien :

J’accompagne les humain·es de notre société de demain dans une démarche de résilience en participant à la conception de leurs outils numériques et en les aidant à améliorer leurs méthodes de travail, le tout dans un esprit de sobriété.

J’ai essayé d’y insuffler un maximum d’éléments issus des étapes précédentes sans pour autant en abuser pour que le message reste clair. Tout d’abord, la notion de « société de demain » fait directement référence à un monde post-effondrement que j’évoquais dans mon article précédent. J’y fais aussi référence en tentant de dessiner une première esquisse d’une société que je souhaite résiliente et sobre. La sobriété fait aussi référence à ma volonté de développer des logiciels simples et « bidouillables ». Mes compétences sont lisibles au creux de mon objectif : la conception d’outils numériques et l’amélioration des méthodes de travail qui incluent les méthodes agiles et une démarche de documentation. Aussi, je m’inscris dans une position de complémentarité (à l’inverse d’être indispensable) des équipes déjà en place en « accompagnant », « participant » et en « aidant ».

Cet objectif pourra être amené à évoluer dans le futur, mais j’espère qu’il saura m’accompagner dans mes premières missions et qu’il permettra de poser sur la table des sujets de discussion que l’on aborde trop peu dans le monde de la technologie. J’espère qu’il véhicule correctement le message politique que je lui ai imaginé.

J’entrevois d’ailleurs déjà des limites à cet objectif très orienté vers un métier que je pense voué à être marginalisé à long terme. Métier par ailleurs pratiqué par et pour une population privilégiée dans le sens où elle possède et maitrise des outils informatiques. Je crois que ces outils doivent s’accompagner d’une démarche complémentaire au risque d’abandonner sur le bord de la route les personnes les moins à l’aise avec le numérique. L’informatique reste un outil à notre service, en aucun cas il ne s’agit d’une fin en soi. Je souhaiterai à terme évoluer vers un métier plus ancré dans le réel. Aujourd’hui je vais toutefois profiter des compétences acquises durant ces dernières années pour orienter le domaine au sein duquel j’agis (le développement logiciel, principalement) vers un horizon qui me semble plus enviable. Ce sera l’occasion aussi de rencontrer des personnes qui pourront me guider vers des voies que je n’imagine pas encore. Mon objectif, tout imparfait soit-il, est une image à cet instant précis de mes envies et une piste à explorer pour pouvoir imaginer et construire « autre chose » par la suite.

Avec cet objectif défini, je considère que le gros du travail introspectif est terminé. Il reste toutefois quelques étapes supplémentaires avant d’attaquer la refonte du site à proprement parler. J’aborderai dans le prochain article les deux derniers points de ma démarche, à savoir de quelle manière je souhaite communiquer et, enfin, la conception de l’architecture du site.

Introspection professionnelle : valeurs et raison d’être

vendredi 28 décembre 2018 à 11:45

Comme je le disais dans un précédent article, la fin de cette année 2018 est pour moi l’occasion de reposer à plat mes motivations professionnelles. Si j’ai décidé de quitter mon emploi chez Sogilis afin de tracer ma propre route, c’est pour différentes raisons parmi lesquelles :

J’envisage aujourd’hui le travail que je peux fournir uniquement à travers un prisme politique (au sens d’engagement). Les logiciels que je conçois ont un impact sur les personnes qui les utilisent, il est important pour moi qu’ils fonctionnent à leur service et non pas contre eux.

C’est ce genre de réflexions que j’aimerais arriver à faire transparaître sur mon site. Le but est de le transformer en « vitrine » professionnelle en mettant en avant mes valeurs, mon mode de fonctionnement, mes compétences, etc. Mais avant d’entamer cette refonte, je souhaite passer par une phase de réflexions plus approfondie.

Le design de soi, ou l’introspection professionnelle

J’ai découvert le concept de « design de soi » il y a un peu plus d’un an grâce à Marie-Cécile Paccard lorsque je l’ai contactée par rapport à Lessy. Le but est d’effectuer un travail de recherche afin de mieux connaître ses aspirations et de mieux communiquer en conséquence. Vous pouvez en apprendre plus dans sa présentation ou via la présentation de Marie Guillaumet qui en a parlé lors de l’évènement Paris Web 2015.

J’étais personnellement un peu dubitatif sur ce que pouvait m’apporter concrètement une telle démarche. Je me suis toutefois prêté au jeu pour Lessy et le fait de voir émerger le contenu aussi naturellement pour la page d’accueil et les éléments destinés à la communauté m’a encouragé à retenter l’expérience sur moi-même (en le documentant, cette fois-ci !)

Sur le sens toutefois, je suis peu à l’aise avec l’expression « design de soi ». D’une part, le mot « design » continue de véhiculer une confusion avec le graphisme ; d’autre part, et de façon plus ennuyante, même en prenant le mot dans son sens de « conception », ce n’est pas tellement l’objet de la démarche. Cela pourrait en effet laisser penser que le « design de soi » vise à créer (concevoir) une nouvelle personne qui ne correspond pas forcément à l’ancienne. Or, je crois que le but est de tirer des traits qui nous correspondent, à la manière d’un caricaturiste qui cherche à représenter une personne à travers quelques caractéristiques qui ressortent. Dans la suite de ma série d’articles, je troquerai donc l’expression par celle d’introspection professionnelle. Dans mon cas, le but est bien d’identifier les traits de ma personnalité sur lesquels je souhaite communiquer dans un cadre professionnel.

Pour cela, je vais procéder en plusieurs étapes qui devraient me permettre de créer le contenu du site :

  1. définition de mes valeurs ;
  2. définition de ma raison d’être ;
  3. définition de mes compétences ;
  4. établissement d’un objectif personnel (c’est-à-dire comment j’honore ma raison d’être) ;
  5. définition de mes moyens de communication ;
  6. conception de l’architecture du site.

Le dernier point me permettra d’organiser les différents éléments qui auront émergé lors des phases précédentes et potentiellement d’en faire émerger de nouveaux.

Les deux premiers points sont traités dans la suite de cet article.

Des valeurs pour guider mes choix

J’ai en vérité entamé la première phase, celle de la définition de mes valeurs, il y a plusieurs mois. Je souhaitais voir comment la perception que j’avais de moi-même évoluait dans le temps, identifier les éléments qui revenaient, comprendre pourquoi je n’étais pas à l’aise avec d’autres, etc. À titre d’exemple, je n’ai pas conservé l’« éthique » dans mes valeurs car ça ne signifiait pas grand chose pour moi : tout le monde possède une éthique sans pour autant placer la même chose derrière. Revendiquer avoir une éthique est nécessairement perçu à travers un prisme différent selon les personnes avec qui j’intéragis.

À l’éthique, j’ai préféré le terme d’intégrité. Affirmer son intégrité permet de garder un cap et de faciliter la définition de ses priorités. Par exemple, j’ai comme conviction que les licences libres ainsi que le respect de la vie privée sont des conditions sine qua non pour qu’un logiciel soit réellement au service de ses utilisateurs et utilisatrices (c’est-à-dire qu’il fasse bien ce qu’on lui demande, sans malveillance). Vous ne me verrez donc pas demain accepter une mission qui ne respecte pas ces conditions parce qu’elle est mieux payée qu’une autre. Cette notion d’intégrité sera par la suite complétée par un manifeste qui détaillera mieux mes engagements.

Le respect dans mes échanges ou envers les utilisatrices et utilisateurs d’un logiciel m’apparaît ensuite nécessaire à toute relation. Rester à l’écoute, savoir exprimer ses sentiments, considérer la personne en face sur un pied d’égalité ; je n’imagine pas d’autre manière de fonctionner pour tirer le meilleur de mes échanges. D’un point de vue technique cela signifie aussi, pour moi, considérer les techniques d’expérience utilisateur et d’accessibilité comme intrinsèques à un projet, pas seulement comme des ajouts selon un budget sur lequel je n’ai pas la main. À l’inverse, d’un point de vue global, cela signifie prendre aussi en compte les externalités de ce que je développe : hors de question de développer un outil qui nuirait encore un peu plus à l’environnement par exemple.

Enfin, la transmission doit faire partie de chaque processus de création. Après avoir lu un peu autour du concept de compostabilité en septembre (via la super présentation de Claire Zuliani à Sud Web), j’ai mieux réalisé la finitude de notre présence au sein d’un groupe. Transmettre mes connaissances et mes compétences m’est alors apparu comme bien plus essentiel pour ne plus être un rouage « indispensable » sans lequel rien ne fonctionne. Mécaniquement, j’ai le sentiment que cela pousse aussi à plus d’humilité. Nous devenons uniques non pas par nos compétences techniques mais par notre vécu.

En me limitant à trois valeurs, je me suis forcé à creuser toujours plus ce qui compte vraiment pour moi. J’ai écarté plusieurs points qui me tenaient à cœur mais que je n’arrivais pas à définir correctement (notamment le principe de remise en question). Ces valeurs sont évidemment fluctuantes : il s’agit d’un travail sur moi-même à un instant T et je m’attends à redéfinir leur contour dans le futur. En revanche, je ne pense pas m’en départir à moins de changer fondamentalement la personne que je suis.

Une raison d’être pour comprendre où je vais

Se trouver une raison d’être n’est pas la chose la plus évidente à faire. C’est pourtant une question qui me taraude depuis un moment car elle questionne sur le sens que l’on souhaite donner à sa vie. Lorsque j’ai pris une année sabbatique en 2015, c’est quelque chose qui m’a travaillé sans que je n’y trouve une réponse qui me convenait.

Ces derniers mois ont toutefois été plus efficaces, au point que j’arrive à la résumer en une courte phrase : concevoir les outils dont la société aura besoin demain. Pour comprendre cette raison d’être, il me paraît important de bien définir ce dont je parle.

Tout d’abord, lorsque je parle de « concevoir [des] outils », je fais le choix conscient de ne pas utiliser le terme de « développer ». Pour moi, un logiciel n’est pas une fin en soi. Il y a avant tout une phase d’acquisition des besoins et de réflexion qui peut notamment mener à la conclusion qu’un outil informatique ne serait pas une bonne solution. Cela implique aussi que je dois étendre mes compétences au delà de la technique informatique, en acquérant notamment plus de compétences liées à l’expérience utilisateur. Je dispose pour cela de précieuses ressources, notamment deux articles de Raphaël Yharrassarry : « Compétences UX et modèle en T » et « Se former en UX Design ? ».

Ensuite, lorsque je parle de « demain », j’y cache derrière la notion de « collapsologie » (ou d’effondrement). Je ne me suis pas encore énormément penché sur le sujet, mais il revient régulièrement dans les discussions qui m’entourent. Je ressens dans mes échanges une notion d’urgence et d’inévitabilité d’une société en mutation profonde. La question n’est pas forcément de savoir « quand ?», encore moins « si ? », mais plutôt « comment ?». À quoi ressembleront nos sociétés dites « modernes » dans un monde où les catastrophes écologiques prédominent, où la faune et la flore fondent comme neige au soleil et où les mouvements migratoires s’accélèrent ? Et si l’on se prenait en main pour imaginer nous-mêmes ce monde de demain et l’accompagner en douceur ? Il existe trois axes que j’ai identifié et dans lesquels j’aimerais m’investir :

  1. accompagner l’inévitable désastre écologique ;
  2. aider les populations en lutte pour affirmer leur légitimité aux yeux du reste de la société ;
  3. repenser nos espaces démocratiques et l’expression du pouvoir.

Vaste programme que celui-là, j’ignore encore quelles formes peuvent prendre mes actions dans chacun de ces domaines mais je ne me fais pas de soucis pour savoir identifier les missions qui entreront en résonance avec ces sujets.

Enfin, le tout fait référence à ce qui se produit dans la sphère technologique depuis des années : les outils qui sont conçus n’émanent pas de réels besoins mais le deviennent une fois bien installés. Apple est notamment championne dans ce domaine, imposant avec brio et comme évidentes des technologies comme le smartphone ou la tablette. On peut toutefois questionner leurs répercussions sur notre société comme une accoutumance à l’instantanéité ou une addiction aux écrans difficiles à jauger. C’est le fameux « temps de cerveau humain disponible » qui est attaqué ici. En vérité, le futur de nos sociétés est aujourd’hui dessiné par des sociétés commerciales qui souhaitent avant tout vendre leurs produits plutôt que de réfléchir au bien commun ; cela me gêne tout particulièrement.

Une conclusion partielle pour préparer une suite plus concrète

Ce premier article était un peu abstrait : je n’ai abordé ici que des sujets qui me serviront de base pour construire le futur contenu du site. Cet article m’est apparu un peu pompeux à plusieurs reprises lors de sa rédaction, mais je crois que le résultat est avant tout un travail honnête sur mes aspirations et me permettra réellement d’affirmer ma manière de travailler avec d’autres personnes.

Je crois ces engagements indispensables dans nos sociétés toujours plus numériques, où nous perdons peu à peu la main sur nos données et leur traitement. Je suis partisan de réinsuffler plus d’échanges humains et une vision positive dans nos vies numériques, et donc nos vies tout court.

Cet article a une saveure particulière pour moi car j’ai réussi à y condenser toutes les réflexions que je mène depuis plusieurs mois ; réflexions notamment alimentées par mes échanges au sein de Framasoft qui est, pour une bonne partie, à l’origine des graines qui commencent à germer sur ce site.

Le prochain article devrait aborder des sujets un peu plus concrets et mener notamment à la rédaction de contenu qui apparaîtra par la suite sur le site.