CloudFest Hackathon: WordPress and the IndieWeb

4 Kommentare zu “CloudFest Hackathon: WordPress and the IndieWeb”

1. Blogpost in German by @pfefferle about explaining W3C Webmention to people. Concluding that what it can do (the why) matters more than tech (the how).https://notiz.blog/2022/04/03/cloudfest-2022-hackathon-indieweb-for-wordpress/

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

   Share the post „Hackathon de la CloudFest 2022 : une histoire de train, de Flammenküche et de standard du web“

   TwitterLinkedInFacebookPocketPartager…
   window.addEventListener(„DOMContentLoaded“, function(){
   if ( navigator.share ) {
   let shareurl = document.location.href;
   let btns = document.querySelectorAll(„.juiz_sps_link_shareapi button:not([data-bound])“);
   const canon = document.querySelector(„link[rel=canonical]“);

   if (canon !== null) {
   shareurl = canon.href;
   }

   btns.forEach(function(el) {
   el.closest(„.juiz_sps_link_shareapi“).removeAttribute( „style“ );
   el.setAttribute( „data-bound“, „true“ );
   el.addEventListener(„click“, async () => {
   try {
   await navigator.share({
   title: „Hackathon de la CloudFest 2022 : une histoire de train, de Flammenküche et de standard du web“,
   text: „Hackathon de la CloudFest 2022 : une histoire de train, de Flammenküche et de standard du web – „,
   url: shareurl,
   });
   console.info(„Nobs: Successful share“);
   } catch(err) {
   console.warn(„Nobs: Error sharing“, error);
   }
   });
   });
   }
   });
   Ajouter aux favoris

   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.window.addEventListener(‚DOMContentLoaded‘, function() { jQuery(‚#footnote_plugin_tooltip_47273_2_1‘).tooltip({ tip: ‚#footnote_plugin_tooltip_text_47273_2_1‘, tipClass: ‚footnote_tooltip‘, effect: ‚fade‘, predelay: 0, fadeInSpeed: 200, delay: 400, fadeOutSpeed: 200, position: ‚top center‘, relative: true, offset: [-7, 0], });});
   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 !

   Planning condensé

   18/03Trajet aller en train : Cognac > Angoulême > Strasbourg.19/03Matin : train Strasbourg > Offenburg > Ringsheim (Europa Park), puis navette jusu’à l’Hôtel Bel Rock > voiturette de golf jusqu’à l’Hôtel Colosseo. (* ^ ω ^)11h – 13h : check-in à l’hôtel + social brunch et rencontre de quelques personnes de la scène WordPress (Nemanja Cimbaljevic, Carole Olinger & Alain Schlesser, Moritz Bappert, Robert Windisch etc…)Fin de matinée jusqu’en fin de soirée : début du hackathon. Accueil, présentation des projets, choix du projet à rejoindre, formation des groupes et début des discussions pour fixer les objectifs du groupe.20/03Matin : Petit déjeuner copieux au restaurant de l’hôtel pour les uns, frühstück léger directement dans la salle du hackathon pour les autres.10h – 19h : Reprise du travail officiel jusqu’en début de soirée. Eclaircissement des objectifs, séparation en sous-groupes en fonction des profils et objectifs de chaque membre de l’équipe.19h – … : Pour faire court à partir du diner, le hackathon est devenu plus informel. Ceux qui souhaitaient continuer à travailler le pouvait, les autres pouvaient profiter de ce temps plus informel pour s’intéresser à l’avancement des autres groupes, réseauter, profiter des avantages de l’hôtel (l’année prochaine je saurai que l’on a un accès illimité à la piscine et au sauna), voire quelques verres au bar de l’hôtel (voir en faire la fermeture) etc… 21/03Matin : dernière ligne droite avant la présentation des résultats de chaque équipe.12h30 : remise des présentation et délibération du jury14h : présentation par chaque team lead du résultat de son équipe.Après-midi : libre à ceux qui le souhaite de rester tout l’après-midi pour continuer à travailler et réseauter.18h : départ pour Strasbourg des étoiles plein les yeux me concernant ! 🤩22/03Trajet retour en train : Strasbourg > Angoulême > Cognac.

   Le lieu : Hôtel Colosseo à Europa Park

   Merci aux sponsors pour avoir rendu le Hackathon possible !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.

   Petit selfie à la gare de Strasbourg !Pas de doute, on se rapproche d’Europa-Park.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 !

   Mauvais arrêt de bus !De plus en plus perdu avant queje ne tombe sur l’employé qui m’a fait un tour de golfette.Finalement, j’ai réussi à arriver jusqu’à l’hotel Colosseo ! 🙂Décoration aperçue dans le couloir de ma chambre d’hôtel : les fleurs de l’amitié franco-allemande avec une touche européenne. 🇫🇷🇩🇪🇪🇺Le truc le plus improbable : une vitrine à propos de la garde Suisse pontificale…Petit selfie le dimanche matin avant que tout le monde n’arrive.La salle du hackathon.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

   Calendrier du premier jour.Liste des projetsLe 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.

   Page des options de l’extension avant le hackathon.Notre inspiration principale : l’interfacte de la fonctionnalité native “Site Health”.Premier onglet de la nouvelle page d’option de l’extension Webmention.Deuxième onglet de la nouvelle page d’option de l’extension Webmention.Le troisième onglet qui est vide, servira à afficher une FAQ, des liens externes, expliquer le fonctionnement de Bridgy etc…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.

   cfhack_2022_indiewebDownload

   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

   La célèbre boite à stickers de Robert Windisch !Super rencontre avec Cory Miller de Post Status !Joli troll ! 😉Simon Kraft qui présente les résultats obtenus par son groupe pour le projet “Local WordPress spam protection with AntiSpam Bee”.Aleksandar Savkovic qui présente les résultats obtenus par son groupe pour le projet “Securing WordPress with the WP-CLI”.Jérôme Vieilledent qui présente les résultats obtenus par son groupe pour le projet “Building a performance testing environment for WordPress core”.Photo des membres du Jury qui annoncent les résultats du hackathonPhoto des membres du Jury qui annoncent les résultats du hackathonQuelques 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 :

   Dark Mode

   
   
   wordpress-webmention
   (this link opens in a new window)
   
   
   
   by
   pfefferle
   (this link opens in a new window)
   
   

   A Webmention plugin for WordPress

   15 Subscribers

   91 Watchers

   29 Forks
   
   Check out this repository on GitHub.com (this link opens in a new window)
   

   Share the post „Hackathon de la CloudFest 2022 : une histoire de train, de Flammenküche et de standard du web“

   TwitterLinkedInFacebookPocketPartager…
   window.addEventListener(„DOMContentLoaded“, function(){
   if ( navigator.share ) {
   let shareurl = document.location.href;
   let btns = document.querySelectorAll(„.juiz_sps_link_shareapi button:not([data-bound])“);
   const canon = document.querySelector(„link[rel=canonical]“);

   if (canon !== null) {
   shareurl = canon.href;
   }

   btns.forEach(function(el) {
   el.closest(„.juiz_sps_link_shareapi“).removeAttribute( „style“ );
   el.setAttribute( „data-bound“, „true“ );
   el.addEventListener(„click“, async () => {
   try {
   await navigator.share({
   title: „Hackathon de la CloudFest 2022 : une histoire de train, de Flammenküche et de standard du web“,
   text: „Hackathon de la CloudFest 2022 : une histoire de train, de Flammenküche et de standard du web – „,
   url: shareurl,
   });
   console.info(„Nobs: Successful share“);
   } catch(err) {
   console.warn(„Nobs: Error sharing“, error);
   }
   });
   });
   }
   });
   Ajouter aux favoris

   Notes de bas de page :[+] Notes de bas de page : ↑1 À l’avenir, il lui reste un défi de taille : modifier l’écrasante proportion de participants masculins.window.addEventListener(‚DOMContentLoaded‘, function() { function footnote_expand_reference_container_47273_2() { jQuery(‚#footnote_references_container_47273_2‘).show(); jQuery(‚#footnote_reference_container_collapse_button_47273_2‘).text(‚−‘); } function footnote_collapse_reference_container_47273_2() { jQuery(‚#footnote_references_container_47273_2‘).hide(); jQuery(‚#footnote_reference_container_collapse_button_47273_2‘).text(‚+‘); } function footnote_expand_collapse_reference_container_47273_2() { if (jQuery(‚#footnote_references_container_47273_2‘).is(‚:hidden‘)) { footnote_expand_reference_container_47273_2(); } else { footnote_collapse_reference_container_47273_2(); } } function footnote_moveToReference_47273_2(p_str_TargetID) { footnote_expand_reference_container_47273_2(); var l_obj_Target = jQuery(‚#‘ + p_str_TargetID); if (l_obj_Target.length) { jQuery( ‚html, body‘ ).delay( 0 ); jQuery(‚html, body‘).animate({ scrollTop: l_obj_Target.offset().top – window.innerHeight * 0.2 }, 380); } } function footnote_moveToAnchor_47273_2(p_str_TargetID) { footnote_expand_reference_container_47273_2(); var l_obj_Target = jQuery(‚#‘ + p_str_TargetID); if (l_obj_Target.length) { jQuery( ‚html, body‘ ).delay( 0 ); jQuery(‚html, body‘).animate({ scrollTop: l_obj_Target.offset().top – window.innerHeight * 0.2 }, 380); } }});

   Antworten
3. Reblog via Matthias Pfefferle Ich war am Wochenende auf dem CloudFest Hackathon und hatte zum zweiten Mal die Change ein Projekt zu betreuen. Die Idee…

   Antworten
4. […] Matthias Pfefferle, Head of WordPess Development at IONOS, […]

   Antworten