mardi, 31 janvier 2017

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

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

MDN (ou plus longuement le « Mozilla Developer Network ») est un wiki, documentant les technologies web. Depuis quelques jours, l’ensemble des sections relatives à HTML, JavaScript et CSS sont intégralement disponibles en français, à jour par rapport à leurs homologues anglaises.

Logo de MDN

MDN est donc un wiki auquel chacun peut contribuer et la documentation qu’il contient pour les technologies web est « agnostique », autrement dit, il ne s’agit pas de documenter uniquement ce qui est pris en charge par Firefox mais bien de servir l’ensemble des développeurs web, quel que soit le navigateur.

Ces sections contiennent 1 749 pages qui décrivent les trois briques fondamentales du Web que sont HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) et JavaScript. Voyons rapidement ce que chacune contient.

HTML

S’il n’en fallait qu’un, ce serait lui. HTML permet de composer un document grâce à des éléments comme <p>, <img>, <a> (qui sert à créer les liens hypertextes qui tissent la toile du Web) et plein d’autres. MDN contient une référence exhaustive qui décrit chaque élément ainsi que les attributs qui permettent de les paramétrer.

Voici un exemple d’un fragment de code HTML d’une page web :

<p> Et voici une bannière intéressante :
  <a href="https://soutien.laquadrature.net/">
    <img src="/img/support_lqdn.png"
             alt="Logo de La Quadrature Du Net pour la campagne de dons" 
             title="Soutenez l'action de La Quadrature Du Net par un don">
  </a>
</p>

Pour les plus nostalgiques des lecteurs, soyez sans crainte, <blink> et <marquee> sont toujours documentés.

La documentation HTML sur MDN

CSS

Le fond, c’est bien, avec la bonne forme, c’est mieux. CSS permet de définir les règles de mise en forme pour les éléments grâce à de nombreuses propriétés, pseudo-classes, pseudo-éléments et autres boîtes et requêtes de média. Chacune des propriétés de la référence est illustrée par un exemple de mise en œuvre et les dernières avancées de ce langage y sont présentées en détails (comme le modèle de grille CSS ou les animations. Il y a même quelques outils destinés à compléter votre arsenal.

Peut-être que, parmi ces 749 pages, vous pourrez trouver comment centrer verticalement une image dans un conteneur…

La documentation CSS sur MDN

JavaScript

Logo JavaScript

Avec bientôt 22 ans au compteur, JavaScript a bien évolué, y compris ces dernières années avec ECMAScript 6 (ou 2015, c’est selon). Sur MDN, ce langage riche, qui ne se cantonne plus au navigateur, est documenté selon plusieurs axes. Il y a tout d’abord un guide dont les 14 chapitres permettent d’appréhender progressivement les concepts de JavaScript. Ensuite, on trouvera la référence, avec une page pour chaque objet, méthode, instruction ou opérateur du langage : cette référence est un outil de précision quand il s’agit de lever le doute sur une imprécision ou un comportement incompréhensible.

Voici un exemple d’un fragment de code JavaScript :

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "toto");
});

Promise.all([p1, p2, p3]).then((values) => {
  console.log(values); // [3, 1337, "toto"]
});

La documentation JavaScript de MDN est une des pierres angulaires du wiki et elle est utilisée dans divers outils comme la console de développement ou les aides à l’édition de code. Certes undefined n’est pas une fonction et NaN a un peu de mal à se regarder dans le miroir mais JavaScript ayant conquis de nombreuses plateformes, il n’y a plus tellement d’échappatoires

Note : cette section concerne uniquement le langage JavaScript en tant que tel et non les API web (telles que le DOM, XHR, etc.)

La documentation JavaScript sur MDN

Quelques chiffres

Ce résultat représente environ :

  • plus de 3 ans de travail
  • plus de mots à traduire que les trois tomes du Seigneur des Anneaux (ou que Guerre et Paix, ou que l’intégrale de 50 Nuances de Grey)
  • plus de 13 000 révisions sur MDN (dont de nombreuses mises à jour : imaginez si Tolkien révisait son manuscrit ou ajoutait de nouveaux chapitres)
  • 1 749 pages
CC-BY-SA Goofy©

Contribuer

Au-delà de ces chiffres un peu bêtes, le plus intéressant a été d’apprendre, de découvrir des gens, d’avoir la chance de voyager. Et si la documentation technique peut paraître austère, la rédiger à plusieurs est bien plus agréable. Aussi, n’hésitez pas à contribuer à ce projet. Vous pouvez (sans ordre, ni exhaustivité garantie) :

Si la traduction vous intéresse, je vous invite à lire ce billet et à remplir ce formulaire pour un week-end où vous pourrez mettre le pied à l’étrier.

Remerciements

Si l’introduction d’un livre contient des remerciements, pourquoi n’en irait-il pas de même pour un tel projet ? Naturellement, j’oublierai de nombreuses personnes qui ont participé et qui le méritent, mea culpa.

À ma chère et tendre qui a supporté cette étrange passion et les bruits du clavier, à Goofy et Framasoft qui m’ont lancé sur la traduction collaborative, à Clochix et David pour m’avoir aidé à découvrir MDN, à Jérémie pour les MercrediDoc, à Florian et Jean-Yves pour leur patience, leur aide et leur soutien précieux, à toutes les personnes de la communauté pour les rencontres et les occasions créées…

Merci.

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

vendredi, 20 mai 2016

Techniques de développement CSS

La cascade CSS via l'inspecteur

Cet article est une traduction de CSS coding techniques écrit par Belén Albeza. Belén travaille au sein de l’équipe DevRel de Mozilla et explique ici sa méthode de travail pour le code CSS afin d’obtenir des feuilles de style claires et qui puissent être maintenues facilement. Comme les autres articles de ce blog, celui-ci est placé en licence CC-BY-SA.

Merci beaucoup à Marine, Ilphrin, Banban, Sandlayth, au traducteur anonyme ainsi qu’à goofy pour sa relecture utile :)


Lire la suite

dimanche, 17 avril 2016

Ma méthode de travail avec Git et GitHub

Schéma du workflow

Cet article est une traduction de Documenting my git/GitHub worklow écrit par Karl Dubost. Karl participe au projet WebCompat pour veiller à ce que les sites web fonctionnent de façon égale sur les différents navigateurs et ce billet est l’occasion de présenter la méthode de travail qu’il utilise avec Git et GitHub. Les méthodes vues ici pourront être utile pour contribuer à d’autres projets, n’hésitez pas à guetter les fichiers CONTRIBUTING.md des différents dépôts. ;)


Lire la suite

mardi, 29 mars 2016

Aide aux développeurs pour les changements à venir dans le développement de modules

Cet article est une traduction de la communauté Mozfr de Developer support for changes in add-on development. Comme vous en avez peut-être entendu parler, de nombreux changements surviennent dans le développement des modules complémentaires. Fin 2017, les WebExtensions seront utilisées par Firefox  […]

Lire la suite

samedi, 5 mars 2016

Proposition de spécification pour l'API WebVR 1.0

WebVR Showcase

Cet article est une traduction de Introducing the WebVR 1.0 API Proposal écrit par Casey Yee et publié sur Hacks.

Merci beaucoup à Ilphrin et Thegennok pour la traduction ! Merci goofy pour la relecture :)


Lire la suite

samedi, 27 février 2016

La propriété background-clip et ses cas d'utilisation

Le modèle de boites

Cet article est une traduction de The background-clip Property and its Use Cases, écrit par Ana Tudor et publié sur CSS Tricks. Ana Tudor réalise de nombreuses démos sur CSS sur CodePen et via Twitter et cet article est l’occasion d’en dire un peu plus sur la propriété background-clip. Merci beaucoup à marine, Banban, Thegennok et Ilphrin pour la traduction et à Théo et goofy pour la relecture.

Lire la suite

samedi, 23 janvier 2016

Firefox et l'API Web Speech

Page about:Webspeech dans la vie conjugale

Ce billet est une traduction de l’article de Chris David Mills : Firefox and the WebSpeech API. Bien que la reconnaissance vocale ne soit pas encore tout à fait opérationnelle dans Firefox, n’hésitez pas à décortiquer les démos ! Merci à goofy pour la relecture :)

Lire la suite

samedi, 16 janvier 2016

Du nouveau pour les outils de développement dans Firefox

venkman-opt.png

Ce billet est une traduction du billet de Patrick Brosset : Revisiting Firefox’s DevTools. Merci à marine et Banban pour la traduction et à Maxime pour celle des articles MDN sur les outils de développement !

Lire la suite

samedi, 26 décembre 2015

Hors ligne et plus encore

Ce billet est une traduction du billet de Salva, Beyond Offline. Cet article est la suite du billet précédent sur les service workers. Merci à marine et Thegennok pour la traduction et à goofy pour la relecture !

Lire la suite

Recettes hors connexion pour les service workers

Page about:serviceworkers dans Firefox Developer Edition

Ce billet est une traduction du billet de David Walsh, Offline Recipes for Service Workers. Un grand merci à marine, Banban, Thegennok, LaPalice pour la traduction et à goofy pour la relecture. Bonne lecture et bonnes fêtes !

Lire la suite

jeudi, 17 décembre 2015

Enfin, on peut compiler en WebAssembly !

mamie fait du webAssembly

Ce billet est une traduction du billet publié par Alon Zakai sur hacks.mozilla.org.

Lire la suite

Les utilisateurs de Firefox sur Windows peuvent désormais regarder Netflix en HTML5

Ce billet est une traduction du billet en anglais paru sur le blog de Mozilla.

Lire la suite

lundi, 24 août 2015

ES6 en détails : l'avenir

typedarrays.png

Suite et fin de la la traduction, qui clôture la série d’articles de Jason Orendorff. L’article original se trouve ici. Vous pouvez retrouver les différents articles de la série grâce aux mots-clefs.

Merci à goofy pour la relecture :) !


Lire la suite

samedi, 22 août 2015

ES6 en détails : les modules

Suite de la traduction, qui continue la série d’articles de Jason Orendorff. L’article original se trouve ici. Vous pouvez retrouver les différents articles de la série grâce aux mots-clefs.

Merci à Banban et Ilphrin pour la traduction et merci à goofy pour la relecture :) !


Lire la suite

jeudi, 13 août 2015

ES6 en détails : les sous-classes et l'héritage

Suite de la traduction, qui continue la série d’articles de Jason Orendorff. L’article original se trouve ici. Vous pouvez retrouver les différents articles de la série grâce aux mots-clefs.

Merci à Banban et Marine pour la traduction et merci à goofy pour la relecture :) !


Lire la suite

- page 1 de 3