Transifex : La plateforme de traductions

Présentation

Transifex est une solution pour gérer les traductions de vos applications ou site Web. Gratuit pour les particuliers ou les projets OpenSource il est néanmoins payant pour les entreprises.

L’outil permet une intégration avec Github, ce qui permet d’automatiser la mise à jour des ressources facilement.

Description d’un Projet

Un projet se défini comme par son type de fichiers (Ici on prendra pour exemple un projet PHP) et ses ressources à traduire.

Résumé du Projet Autoupdate

La page Overview présente les statistiques du projet avec les langues traduites et leur avancement.

Utilisation

Pour commencer à traduire, il faut sélectionner une langue puis un fichier de ressources.

Choix de la ressource à traduire
Détails de la la ressource

Lors de l’affichage des détails de la ressource, il est possbile de lancer l’interface de traduction via le bouton translate.

Ecran de traduction

L’écran de traduction est très bien fait :

  • Sur la partie gauche, vous avez l’état des traductions de la ressource avec la possibilité de sélectionner la langue de destination
  • Sur la partie droite, l’édition de la ressource avec les suggestions qui proposent des mots traduits dans les autres fichiers

Intégration GitHub

L’intégration Github permet de recupérer les fichiers directement sur votre dépôt. Lors d’une mise à jour faite par l’équipe de développement, la chaine de caractère modifiée sera remise à zéro dans transifex.

Pour remonter les informations à votre dépôt Github, un petit script sera nécessaire pour préciser la source et la destination des fichiers traduits :

Script permettant de configurer l’emplacement des fichiers dans votre dépot Git

Enfin vous pourrez sélectionner à quel moment repousser vos fichiers vers Git. Soit à la fin de la revue ou uniquement dès que tout le fichier est traduit : c’est au choix.

Pour ce qui est de la forme, Transifex peut pousser les modifications sous forme de commit ou de Pull request.

Vous pourrez ensuite vérifier sur votre dépôt Git que toutes les modifications ont bien été prises en comptes.

Conclusion

Merci d’avoir lu l’ensemble de l’article. je n’ai pas détaillé tous les écrans car il s’agissait dans mon esprit d’une présentation de ce qu’on faisait à l’OGSteam. N’hésitez pas à commenter l’article si vous avez des questions !

Utilisez NPM et Gulp pour éviter les CDN

L’idée est ici de garder votre application complètement indépendante, et d’éviter mes CDN sur votre page Web.

Nous allons utiliser le couple npm gulp pour ne prendre dans notre package que le nécessaire.

Présentations

NPM est le gestionnaire de package le plus connu de nodeJS

Gulp est une librairie très utilisée pour personaliser le déploiement et parfois préparer le package de livraison.

Création du Projet

Nous allons utiliser dans notre application les librairies JQuery et Loglevel. Pour ne pas les utiliser nous allons les récupérer avec NPM

Préparez un fichier package.json à la racine du projet comme suit : (Nous allons expliquer les scripts embarqués juste après)

{
  "name": "mon-extension",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "node-clean": "npm prune && npm install",
    "build": "gulp build",
    "test": "echo 'no test'"
  },
  "keywords": [],
  "author": "DarkNoon",
  "license": "GPL-2.0",
  "devDependencies": {
    "gulp": "^4.0.2"
  },
  "dependencies": {
    "jquery": "^3.5.1",
    "loglevel": "^1.6.8"
  }
}

Puis lancez npm install pour installer les packages dans le dossier node_modules.

npm install

Vous obtenez :

Gulp est mon ami

Nous allons créer une simple tâche de copie de fichiers avec Gulp. Nous faisons ça pour éviter de déployer le dossier node_moules qui est souvent bien trop rempli de dépendances que l’on n’utilise pas.

Voici le script :

const {  src, dest } = require('gulp');

function update_jquery() {
    return src(["node_modules/jquery/dist/jquery.min.js"]).pipe(dest("contribs"));
}

function update_loglevel() {
    return src(["node_modules/loglevel/dist/loglevel.min.js"]).pipe(dest("contribs"));
}

function build(cb) {
    update_jquery();
    update_loglevel();
    cb();
}
exports.build = build;

Le script va simplement copier les fichers nécessaires dans notre dossier contribs aveec la command build.

Ce qui nous permettra par la suite de produire un package sans Node Modules et de rester léger 🙂

J’espère que ce petit tutoriel vous a plu : vous pourrez le trouvez sur GitHub à cet endroit : Github