mardi, 16 mars 2021

MDN sur GitHub, comment contribuer ?

MDN Web Docs est un site collaboratif qui documente les différentes technologies web, de HTML à CSS en passant par JavaScript, HTTP, les différentes API (DOM, WebGL, etc.). Pendant de nombreuses années, le contenu de MDN était organisé dans une base de données et éditable page par page via un éditeur sur le site. Fin 2020, MDN a effectué une mue et si le site n’a pas changé d’adresse, le contenu sous-jacent réside désormais sur GitHub : toute la documentation est contenue dans un dépôt Git. Après une période de gel hivernal, la localisation est aujourd’hui de nouveau possible (ce billet fait suite au précédent). Bref, la méthode de contribution et les outils associés ont bien changé. Voyons ce qu’il en est ici.

L’organisation

Pour commencer, voyons comment s’organise la plateforme de MDN (qui n’est pas l’organisation du contenu au sein de MDN). Il existe trois dépôts Git :

  • mdn/yari : Yari est le remplaçant de Kuma, c’est le serveur web qui s’occupe du rendu du site tant pour le contenu des articles que pour le reste de l’interface utilisateur.
  • mdn/content : ici on trouve tous les documents anglophones qui constituent le contenu de référence de MDN.
  • mdn/translated-content : enfin, ce dépôt contient les localisations, toutes locales confondues, de mdn/content. C’est ici qu’on retrouve un répertoire pour tout le contenu francophone de MDN.

Schéma d'organisation des depôts Git pour MDN, mar. 2021

Comme expliqué précédemment, les locales sont réparties en deux catégories : celles qui sont ouvertes aux contributions et celles qui sont « gelées ». À l’heure actuelle, le français fait partie des locales ouvertes aux contributions (avec le chinois, le japonais et le russe).

Après une période de transition, cette ouverture est effective depuis le 06 mars 2021.

Comment contribuer ?

C’est l’objet de ce billet : vous fournir les informations nécessaires pour que vous puissiez (re)commencer à contribuer à MDN, notamment à la localisation francophone du contenu.

Le format

Avant de plonger dans la pratique, voyons rapidement comment sont structurés les documents dans les dépôts mdn/translated-content ou mdn/content. L’arborescence des fichiers suit celle du site et correspond à celle utilisée sur le dépôt mdn/content (il n’y a pas de traduction des noms de répertoire) :

files
  <locales>
  fr
    <sections>
    web
      ...
        <page> // répertoire
          index.html

Chaque page possède donc un répertoire dans lequel sont stockés les fichiers et surtout le contenu de la page : index.html.

Ce fichier ne contient pas que du HTML. En effet, il commence par un préambule de métadonnées décrites en YAML. Ces métadonnées décrivent notamment le titre, le fragment d’URL de la page (slug), les étiquettes associées et le lien avec la page anglaise. Par exemple :

---
title: Structures de données
slug: Web/JavaScript/Data_structures
tags:
  - Beginner
  - JavaScript
  - Types
translation_of: Web/JavaScript/Data_structures
original_slug: Web/JavaScript/Structures_de_données
---

On trouve ensuite le contenu de l’article en HTML.

Contribuer occasionnellement

Si vous souhaitez corriger une coquille ou contribuer sur une page en particulier, vous pouvez utiliser directement GitHub (il vous y faudra un compte pour contribuer). Sur la page de MDN qui vous intéresse, utilisez le lien en bas de page pour vous rendre directement sur le document :

Lien de MDN vers GitHub

Sur GitHub, vous pouvez alors utiliser la fonctionnalité d’édition pour modifier la page :

Bouton d'édition avec un crayon sur l'interface de GitHub.

Une fois les modifications apportées, l’interface de GitHub vous guidera pour finaliser votre contribution et cela créera automatiquement une requête qui sera revue avant d’être fusionnée et publiée.

Contribuer de façon plus conséquente

Si vous souhaitez éditer et/ou traduire plus fréquemment ou si votre modification porte sur plusieurs documents, il sera nécessaire de mettre en place un environnement sur votre ordinateur.

Prérequis

Commençons par voir ce qu’il faut au préalable :

  • Git : selon votre système d’exploitation, il est peut-être déjà installé. Sinon, vous pouvez le télécharger pour l’installer. Il est aussi préférable d’avoir quelques notions de Git pour se lancer.
  • Compte GitHub : à l’instar des modifications mineures, il faudra un compte sur https://github.com.
  • Node.js et npm : le dépôt mdn/content utilise Node.js comme système de serveur web.
  • yarn : yarn est un paquet npm. C’est le gestionnaire de dépendances pour mdn/content et une fois npm installé, vous devrez lancer npm install -g yarn pour installer yarn.
Initialisation

Il est nécessaire de récupérer les deux dépôts sur votre ordinateur : mdn/content et mdn/translated-content. Le premier nous permettra d’avoir le contenu en anglais pour comparer et surtout de pouvoir lancer le site en local pour vérifier l’affichage du contenu édité. Le second contient les documents en français que nous allons pouvoir éditer.

  1. Sur GitHub, faites un fork de mdn/content et de mdn/translated-content
  2. Clonez les deux dépôts pour créer des dépôts locaux :

    git clone git@github.com:<votrenomsurgit>/content.git
    git clone git@github.com:<votrenomsurgit>/translated-content.git
    
  3. Rajoutez le dépôt de référence avec une référence distante/remote upstream. Dans les répertoires respectifs :

    // Dans le répertoire de translated-content
    git remote add upstream git@github.com:mdn/translated-content.git
    // Déplacez vous dans le répertoire de content
    git remote add upstream git@github.com:mdn/content.git
    
  4. Allez dans le répertoire content. Pour installer les dépendances, lancez :

    yarn install
    
  5. Afin que mdn/content « sache » où se trouve le contenu du contenu traduit, on utilise un fichier d’environnement .env situé à la racine du répertoire content. Créez un fichier .env avec deux variables :

  • EDITOR pour l’éditeur de texte que vous souhaitez utiliser. La variable EDITOR doit correspondre au chemin du programme ou à la commande lancée pour le démarrer, elle sera utilisée pour ouvrir votre éditeur via un bouton sur le site local.
  • CONTENT_TRANSLATED_ROOT pour le chemin du répertoire du dépôt local pour translated-content.

Par exemple :

    EDITOR=code
    CONTENT_TRANSLATED_ROOT=../translated-content/files
  1. Lancez le serveur avec

    yarn start
    

Vous pouvez maintenant vous rendre sur votre http://localhost:5000 pour parcourir le contenu de MDN. Vous pouvez éditer les fichiers sur votre système de fichier avec votre éditeur de prédilection ou utiliser les fonctionnalités de Yari qui intègre un éditeur (ou encore utiliser Yari pour lancer votre éditeur depuis le site local).

Capture de l'interface de mdn/yari en environnement local, mar. 2021

Préparer une contribution
  1. Si vous avez déjà fait une contribution ou si quelques jours ont passé depuis le clonage des dépôts, commencez par rafraîchir vos dépôts locaux à partir des dépôts de référence/upstream puis relancez yarn install.

  2. Créez une branche avec

    git checkout -b correction-coquille-fr-jean-biche
    
  3. Modifiez et gérez vos fichiers avec Git afin de faire un ou des commits.

  4. Poussez la modification sur votre fork avec

    git push -u origin correction-coquille-fr-jean-biche
    
  5. Utilisez GitHub pour créer une merge request

  6. Attendez la revue puis la fusion. Ajustez éventuellement le contenu en fonction des retours.

  7. Vous pouvez alors guetter What’sDeployed pour savoir quand votre contribution sera visible sur https://developer.mozilla.org (pour être tout à fait précis, il peut y avoir quelques heures de décalage avec les caches CDN).

Qu’y a-t-il à faire ?

Il existe de nombreuses façons de contribuer et d’aider. Voici une liste (non exhaustive) :

  • Vous pouvez vérifier s’il existe des issues idéales pour commencer, sur le contenu francophone.
  • Rapporter des bugs : en vous baladant sur MDN, si vous croisez une erreur, vous pouvez cliquer sur le lien « Report a problem with this content on GitHub » et indiquer ce qui est incorrect.
  • Contribuer de façon générale : si une page de MDN n’existe pas en français sur un sujet qui vous passionne, vous pouvez la traduire en français afin de la rendre accessible à plus de personnes.

Bref, toute aide est la bienvenue !

Ensuite

Si vous souhaitez discuter ou si vous avez des questions à ce sujet, n’hésitez pas à nous rejoindre sur Matrix sur le salon #l10n-fr.

mardi, 8 décembre 2020

Mise à jour à propos de la stratégie de localisation de MDN

MDN web docs Mozilla : Des ressources pour les développeurs, par les développeurs.

MDN web docs Mozilla : Des ressources pour les développeurs, par les développeurs. Cet article est une traduction d’An update on MDN Web Docs’ localization strategy, écrit par Chris Mills. Si vous souhaitez contribuer aux traductions de MDN en français, venez nous faire signe sur le salon #l10n-fr !

Lire la suite

lundi, 2 septembre 2019

Les types d'interfaçage WebAssembly : une interopérabilité pour les unir tous

4 personnages représentant Python, Ruby, Rust et C++ disent : Nous aimons la vitesse de WebAssembly, la sécurité qu'il pourrait nous apporter et nous souhaitons tous que les développeurs puissent travailler efficacement

Cet article est une traduction de WebAssembly Interface Types: Interoperate with All the Things!, écrit par Lin Clark. Merci à elle pour le travail de rédaction originale !

Lire la suite

vendredi, 10 mai 2019

Détails techniques sur la panne des modules complémentaires de Firefox

Illustration des liens de signatures entre les certificats et les modules

Cet article est une traduction de Technical Details on the Recent Firefox Add-on Outage, écrit par Eric Rescorla, directeur technique de l’équipe de Firefox. Pour un aperçu moins technique, vous pouvez lire cet article. Merci à Vincent pour la relecture !


Il y a quelques jours, Firefox a rencontré un problème empêchant la plupart des modules complémentaires de fonctionner. Nous avons commis une erreur en laissant expirer un des certificats utilisés pour la signature des modules. Cela a eu pour effet de désactiver une majeure partie des modules. Maintenant que ce problème a été corrigé pour la plupart des utilisateurs et que la plupart des modules sont revenus à la normale, nous souhaitions revenir sur les détails de ce problème, les raisons de son origine et la façon dont nous l’avons résolu.

Lire la suite

dimanche, 19 août 2018

Retrait de la confiance envers les certificats TLS de Symantec

Sites avec certificat émis par Symantec dans Chrome Canary à gauche et Firefox Nightly à droite
Sites avec certificat émis par Symantec dans Chrome Canary à gauche et Firefox Nightly à droiteSites avec certificat émis par Symantec
dans Chrome Canary à gauche
et Firefox Nightly à droite

La plupart des grands éditeurs de navigateurs ont annoncé des plans, qui arrivent rapidement à échéance, pour retirer la confiance accordée aux certificats émis par Symantec. Les admins de sites web dont la navigation sécurisée (HTTPS) repose sur de tels certificats doivent en changer rapidement, faute de quoi leurs sites ne vont rapidement plus s’afficher dans la plupart des navigateurs. La communauté Mozilla francophone a traduit le billet du blog Sécurité de Mozilla expliquant l’urgence de cette action.

 

Les utilisateurs et utilisatrices de Firefox Nightly peuvent aider à la transition en contactant les canaux de communication ou d’assistance des sites qui seront affectés par ces retraits de confiance.

Lire la suite

lundi, 9 avril 2018

Une plongée illustrée dans les modules ECMAScript

Cet article est une traduction de ES modules: A cartoon deep-dive, écrit par Lin Clark. Merci à goofy pour la relecture !

Lire la suite

lundi, 21 août 2017

IntersectionObserver arrive dans Firefox

Illustration d'un élément cible avec une intersection partielle sur le viewport du navigateur

Cet article est la traduction de Intersection Observer comes to Firefox, écrit par Dan Callahan et publié sur le blog Hacks. La version anglaise est disponible ici. Merci à Marie Destandau pour cette traduction !


Lire la suite

mercredi, 21 juin 2017

Bienvenue au MozFest de Londres

MozFest : photo de groupe

MozFest : photo de groupeLe MozFest, pour Mozilla Festival, tiendra sa 8ᵉ édition à Londres cet automne. Le mouvement du Web ouvert s’y retrouvera du vendredi 27 au dimanche 29 octobre. Des passionné·e·s des technologies, des éducateur·rice·s et des makers se réuniront pour explorer le futur du Web ouvert.

Le MozFest, c’est plus de 1 600 visiteur·se·s, des participant·e·s de plus de 50 pays et 325 ateliers et conférences.

Vous avez jusqu’au 1er août pour répondre à l’appel à propositions avec des activités interactives et inclusives.

Il s’agit d’une formidable opportunité. Et, pour vous en convaincre, qui de mieux placé que le directeur général de la Mozilla Foundation, Mark Surman ?

Lire la suite

mercredi, 8 mars 2017

Une introduction cartoonesque à WebAssembly

Courbe décrivant la progression des performances pour JavaScript

Cet article est le premier d’une série de traductions d’articles écrits par Lin Clark et publiés sur le blog Hacks. La version anglaise est disponible ici. Merci à Adam, dattaz, Jeremie et à goofy et Benjamin pour la relecture :)


Lire la suite

Un petit cours accéléré de compilation à la volée (JIT)

Communiquer avec un alien ?

Cet article est le deuxième d’une série de traductions d’articles écrits par Lin Clark et publiés sur le blog Hacks. La version anglaise est disponible ici. Merci à dattaz, Jeremie et à goofy et Benjamin pour la relecture :) Si vous n’avez pas lu les autres articles, nous vous conseillons de démarrer depuis le début.


Lire la suite

Un petit cours accéléré d'assembleur

Discuter avec un alien

Cet article est le troisième d’une série de traductions d’articles écrits par Lin Clark et publiés sur le blog Hacks. La version anglaise est disponible ici. Merci à Jeremie et à goofy et Benjamin pour la relecture :) Si vous n’avez pas lu les autres articles, nous vous conseillons de démarrer depuis le début.


Lire la suite

Créer et manipuler des modules WebAssembly

L'utilisation de la représentation intermédiaire avec les différents composants

Cet article est le quatrième d’une série de traductions d’articles écrits par Lin Clark et publiés sur le blog Hacks. La version anglaise est disponible ici. Merci à dattaz, Jeremie et à goofy et Benjamin pour la relecture :) Si vous n’avez pas lu les autres articles, nous vous conseillons de démarrer depuis le début.


Lire la suite

D'où vient la rapidité de WebAssembly ?

Les différentes tâches à réaliser pour lancer une application JavaScript

Cet article est le cinquième d’une série de traductions d’articles écrits par Lin Clark et publiés sur le blog Hacks. La version anglaise est disponible ici. Merci à goofy et Benjamin pour la relecture :) Si vous n’avez pas lu les autres articles, nous vous conseillons de démarrer depuis le début.


Lire la suite

WebAssembly aujourd'hui et demain

Les différents navigateurs sont d'accord pour WASM

Cet article est le sixième d’une série de traductions d’articles écrits par Lin Clark et publiés sur le blog Hacks. La version anglaise est disponible ici. Merci à dattaz et à goofy et Benjamin pour la relecture :) Si vous n’avez pas encore lu les autres articles, nous vous recommandons de commencer depuis le début.


Lire la suite

mardi, 31 janvier 2017

Les sections HTML, CSS et JavaScript de MDN sont disponibles en français

Logo de MDN

TL;DR : Les 1 749 pages de MDN pour les sections HTML/JS/CSS sont désormais disponibles, à jour, en français.

Lire la suite

samedi, 14 janvier 2017

Dans les entrailles de Git

L'arbre pour le commit a1

Le billet qui suit a d’abord été publié sur son blog par Nicolas Leuillet, à qui nous devons l’excellent Wallabag. Cette traduction collaborative à laquelle a participé le groupe Framalang nous a semblé intéressante pour notre blog « technique » et c’est l’occasion pour nous de lancer une invitation à tous ceux qui voudraient publier ici sur les technologies web. N’hésitez pas à nous contacter.

 

Lire la suite

samedi, 29 octobre 2016

Le projet Quantum de Mozilla, des ambitions et des précisions

Capture_du_2016-10-28_23-43-53.png

Après un premier billet qui traçait les grandes lignes du projet et sa philosophie (Un saut quantique pour le Web) nous disposons maintenant d’un peu plus de précisions techniques grâce à cet article de Bill Mc Closkey que nous vous traduisons ci-dessous : après avoir mentionné les quatre projets distincts mais associés sous la bannière de Quantum, Bill nous expose l’avancement du projet Quantum Code et invite déjà à contribuer. Bill travaille notamment sur les processus séparés chez Mozilla, il n’est donc guère surprenant de le retrouver ici impliqué sur le projet Quantum.

Traduction MozFr : Julien / Sphinx, Jérémie et Goofy

Lire la suite

jeudi, 27 octobre 2016

Un saut quantique pour le Web

davidBryant.jpeg

Cet article est la traduction du billet A Quantum Leap for the Web écrit par David Bryant. David est à la tête de l’équipe Platform Engineering de Mozilla et il annonce ici le lancement et le futur proche du projet Quantum, qui vise à renouveler entièrement plusieurs composants majeurs sur lesquels reposent les technologies web actuelles.

Traduction MozFr : Sphinx, TheGennok et Goofy.

Lire la suite

dimanche, 18 septembre 2016

Les onglets contextuels dans Firefox Nightly

icône menu hamburger

Attention : cette fonctionnalité est encore expérimentale et peut être amenée à évoluer :) Pourquoi faire ? « Mais dis-moi plutôt qui tu es ? », Rafiki, Le Roi Lion Lorsque nous naviguons sur le Web, nous utilisons différents sites pour différents besoins. Notre identité numérique se compose parfois  […]

Lire la suite

mercredi, 8 juin 2016

Aider les développeurs web à propos des erreurs JavaScript

Ce billet est une traduction de Helping web developers with JavaScript errors, écrit par Florian Scholz et Morgan Phillips.

Lire la suite

- page 1 de 4