Hackathon de la CloudFest 2022 : une histoire de train, de Flammenküche et de standard du web

Accueil » Blog » WordPress » Hackathon de la CloudFest 2022 : une histoire de train, de Flammenküche et de standard du web

En mars 2022, j’ai eu le plaisir de participer au Hackathon de la Cloudfest. Un super évènement qui correspond à mes objectifs professionnels du moment : sortir de ma zone de confort, améliorer mon anglais et m’investir dans la communauté WordPress.

Si vous me suivez sur les réseaux sociaux, vous devez savoir que je suis l’un des organisateurs du WordCamp Europe 2022 (j’en parlerai dans un article à venir). C’est dans ce cadre que j’ai le plaisir d’avoir rencontré Carole Ollinger, connue pour son utilisation immodérée du violet, son amour des chiens et ses nombreuses participations à la scène WordPress.

Il s’avère qu’elle est également l’organisatrice du Hackathon de la Cloudfest depuis plusieurs années. En discutant de choses et d’autres, elle m’a convaincue de participer avec les arguments suivants :

• Tout est gratuit : l’hotel, la participation, la restauration est couverte par les sponsors. Seul le trajet reste à la charge des participants. Encore que pour ceux qui sont en Allemagne, le billet de train est remboursé. Ça marque des points.
• Un évènement tech-agnostique : bien sûr les CMS en général et WordPress en particulier sont très bien représentés, mais certains projets sortaient de mon métier qui est la création et la maintenance de sites internet. De nombreux projets du hackathon étaient éloignés de mon travail au quotidien. C’est intéressant car les participants sont également variés.
• Un évènement à la cool pendant lequel on travaille réellement. Je suis novice en termes d’hackathon, mais d’après les commentaires des autres participants : il existe trop d’hackathon durant lesquels il n’y a pas assez de travail permettant de présenter un résultat.
• Et enfin, l’envie affichée par Carole de diversifier le profil des participants. Sur plusieurs sujets car qui dit hackathon, dit développeurs. Donc, mon profil l’intéressait. Le fait qu’il soit organisé en Allemagne, les germanophones sont majoritaires bien que l’évènement soit en anglais.^[1]À l’avenir, il lui reste un défi de taille : modifier l’écrasante proportion de participants masculins.

En additionnant tout ça au fait que la Cloudfest est organisée à la frontière franco-allemande à Europa-Park, l’occasion était trop belle pour ne pas m’y rendre !

Le lieu : Hôtel Colosseo à Europa Park

Cette année, le Hackathon de la Cloudfest était organisé à l’hôtel Colosseo. Si vous ne connaissez pas la Cloudfest, c’est un peu le grand raout de l’industrie de l’hébergement web. On peut comparer ça avec le WordCamp Europe dans notre industrie par exemple. Ça dure une semaine pendant laquelle Europa Park est totalement privatisé. Le Hackathon se déroule le weekend qui précède cette grande foire professionnelle.

Si vous habitez en France, comme moi, c’est relativement accessible. Il vous suffit de vous rendre à Strasbourg et de là, vous pouvez vous rendre à Europa Park soit en train, soit en voiture assez facilement. Je crois qu’il existe même des bus.

J’ai opté pour le train pour faire tout le trajet. J’ai donc pris un TGV d’Angoulême à Strasbourg, puis un TER de Strasbourg à Offenburg et enfin vous avez un équivalent allemand du TER (le Regionalbahn : RB ou le Regional-Express : RE) entre Offenburg et Ringsheim. Une fois arrivé à la gare de Ringsheim, une navette passe toutes les ~20 min et vous déposera à l’hôtel où vous séjournez.

Pour l’anecdote, je me suis planté d’hôtel et un employé d’Europa Park m’a proposé de me déposer au bon hôtel avec golfette ! Je devais avoir l’air vraiment perdu ! ?

L’hôtel Colosseo était l’endroit parfait pour le hackathon, tout était très bien organisé. Nous n’avions vraiment rien à prévoir à part un ordinateur. Le reste était organisé par la super équipe de la Cloudfest. Chapeau à Carole pour la super organisation pendant les 3 jours de l’évènement !

---

L’équipe

J’ai choisi de rejoindre le projet porté par Matthias Pfefferle : WordPress and the IndieWeb (je vais y revenir plus tard). C’était une super équipe composée de 8 personnes :

• Carolina Lindqvist, ingénieure cloud/kubernetes,
• Hagen Graf, chef d’entreprise, consultant en stratégie web,
• Jan Vogt, développeur JS/chef d’entreprise,
• Matthias Pfefferle, responsable du développement WordPess chez IONOS,
• Marko Feldmann, développeur WordPress et collègue de Matthias,
• Moritz Bappert, développeur WordPress/chef d’entreprise,
• Stefan Euchenhofer, développeur e-commerce/chef d’entreprise,
• et moi-même.

C’était assez intéressant car l’équipe était assez équilibrée entre profils techniques, business, produit, chef de projet… Globalement, nous avons réussi à travailler en anglais de manière efficace malgré les différences de niveaux.

Le travail

Le hackathon a démarré par un tour de table des différents projets, la part belle était donnée à la communauté WordPress avec 5 des 8 projets ! ?

Dans les autres projets proposés, celui de la communauté Joomla était très intéressant : vous pouvez en lire plus sur le site official de leur communauté.

Comme expliqué dans le paragraphe précédent, j’ai rejoint le projet de Matthias : WordPress and the Indieweb. À vrai dire, sa présence au hackathon m’a décidé à participer. Cela fait quelques années que je m’intéresse au travail du mouvement Indieweb.

Je reviendrai surement sur les projets du mouvement dans un autre article. C’est un sujet très vaste, mais pour comprendre notre travail lors du hackathon, il vous faudra au minimum connaitre les standards suivants :

• Webmention – pour notifier d’autres sites internet
• Micropub – l’API ouverte standardisée (avec l’aide du W3C) qui permet de créer, modifier et supprimer des messages lisibles entre votre site et des sites distants.
• IndieAuth – permet d’authentifier votre site internet.

Évidemment, il existe d’autres projets liés : Microsub, Websub, les bridges (par exemple Bridgy ou Webmention.io), etc…

Revenons à nos moutons : Matthias est le développeur de plusieurs extensions WordPress. Ce sont des projets personnels développés sur son temps libre et totalement gratuits.

Son projet principal se nomme tout simplement “Webmention“, auquel il a attaché une seconde extension nommée “Semantic-Linkbacks” qui ajoute des options supplémentaires à la première extension.

En rejoignant le projet, Matthias nous a expliqué les origines des différents protocoles développés par le mouvement Indieweb en insistant sur le fait que ces protocoles sont agnostiques. Ils ont été développés comme des standards techniques.

Son travail a consisté à implémenter ces standards pour l’écosystème WordPress via ses extensions. L’idée étant de pouvoir proposer au propriétaire d’un site WordPress d’activer Webmention en quelques clics en installant l’extension.

Lors du hackathon, Matthias nous a exposé l’état actuel de son travail :

• De façon générale, il nous a expliqué que l’extension est entièrement fonctionnelle d’un point de vue technique : lorsque l’on installe les extensions, cela permet d’utiliser les protocoles et de recevoir ou envoyer des notifications vers/à partir d’autres sites internet,
• cependant, l’extension reste réalisée par et pour des développeurs, l’extension n’est pas très attirante et les options peuvent être complexes à appréhender pour un néophyte,
• enfin, son objectif serait de faire grossir la base d’utilisateur pour pouvoir prétendre un jour proposer d’intégrer ces protocoles nativement dans WordPress core.

À partir de cet état des lieux, plusieurs projets ont été proposés :

• Matthias nous a expliqué travailler sur une nouvelle branche (cf. Github : branche 5.x) de l’extension Webmention qui apportera plusieurs améliorations techniques, ainsi que la fusion de l’extension optionnelle “Semantic-Linkbacks” dans l’extension principale “Webmention” pour pouvoir se focaliser sur une seule extension et rendre l’ensemble plus simple à comprendre pour les utilisateurs finaux.
• Stefan et Jan se sont intéressés à Gutenberg en développant des prototypes d’options sur le nouvel éditeur de WordPress qui rendrait l’utilisation de Webmention plus intégrée,
• de notre côté, avec Carolina et Moritz, nous nous sommes intéressés aux étapes d’installation de l’extension.

Avec Carolina et Moritz, nous avons challengé Matthias sur la phase d’onboarding. Le constat que nous partagions tous est que la page d’option actuelle du plugin dans le Back-Office de WordPress ne correspond plus à ce que des plugins “grand public” proposent.

Voici les étapes de notre travail :

• Lister les options actuellement disponibles dans la page des paramètres du plugin,
• lister les options manquantes dans la page d’option que le plugin propose,
• classer ces différentes options dans 2 catégories :
  • les options nécessaires pour l’ensemble des utilisateurs,
  • les options plus confidentielles ou demandant plus de connaissances
• redécouper des étapes claires permettant une configuration fluide de l’extension une fois que celle-ci est activée par le propriétaire d’un site.

Une fois ce travail initial réalisé, nous nous sommes mis à la recherche d’exemples de plugin nous permettant de créer une page d’options plus moderne.

L’objectif recherché était de créer une page ressemblant plus à un “Install Wizard” qu’à une vieille page d’option WordPress. Nous nous sommes tournés vers plusieurs exemples dont le plus intéressant est sans nul doute Yoast.

Pour l’interface, nous nous sommes inspirés de la page native du Site Health :

 /wp-admin/tools.php?page=health-check

C’était important pour moi de proposer une base de travail évolutive. En fondant le travail de la nouvelle page d’option sur une interface native de WordPress, nous évitions ainsi de complexifier le travail de maintenance futur de l’extension. L’autre raison à ce choix est lié au besoin de travailler vite pour avoir une version à proposer à la fin du hackathon. Le style pouvant être adapté dans le futur à partir de nos idées.

Pour organiser la nouvelle interface, Carolina et moi avons utilisé Figma pour créer rapidement des maquettes et les contenus. Nous pouvions ensuite facilement partager nos itérations à Moritz afin d’intégrer tout cela sur la nouvelle interface.

Au bout du compte, Moritz a proposé une PR sur la branche 5.x en parallèle du travail de Matthias et Marko d’un côté et de Stefan et Jan de l’autre.

Hagen quant à lui a discuté avec chaque groupe. Il a apporté son expérience, sa vision et son enthousiasme au groupe. Discutant des aspects théoriques avec chaque groupe, testant les différentes itérations, assurant notre communication sur les réseaux sociaux et montrant à d’autres participants, comme Robert Windisch, le fonctionnement en ajoutant et testant l’extension Webmention sur son propre blog.

Les résultats

Le lundi 21, Carolina et Matthias se sont chargés de créer le support de présentation listant nos différents accomplissements.

Vers le déjeuner, l’ensemble des team leads présentèrent leurs résultats devant l’ensemble des participants et le jury.

Voici la vidéo de la présentation de Matthias, filmé par Moritz :

Voici la présentation des résultats du hackathon :

En vrac

Quelques liens vers des articles publiés par d’autres participants :

• L’article officiel sur le site de la Cloudfest (en),
• Le point de vue de Matt Biscay, un autre français, qui a participé au projet “Securing WordPress with the WP CLI” (Matt : l’année prochaine prenons un verre ensemble ?),
• La rétrospective d’IONOS qui sponsorisait l’évènement et dont plusieurs salariés participaient (dont 2 team leads : Simon et Matthias).
• L’article Post Status (en) qui résume leur participation au jury du hackathon (je suis même mentionné ?).
• L’article de Matthias himself (de),
• Les différents articles d’Hagen (décidément très prolifique pour parler du sujet) : son récap (de) / un court article (de) présentant l’intérêt de Webmention dans WordPress / un article de prospective (de) sur une utilisation possible de Webmention avec WordPress intitulé : “Un outil de feedback gratuit pour les médias sociaux avec Bridgy, Webmention et WordPress” (qui reprend et creuse une discussion que nous avons eu pendant le hackathon).

---

La lecture de cet article t’a plu ? Tu veux en savoir plus ? Jette un œil au repository du plugin Webmention de Matthias Pfefferle sur Github :