⇦ Ramen Development_

Como traduje mi portafolio con JavaScript y JSON

Cover Image for Como traduje mi portafolio con JavaScript y JSON

Hace un par de semanas, publiqué un artículo sobre la selección de idioma y las traducciones (el cual deberías leer). Así que esta semana debería hacer un artículo sobre cómo traduje mi sitio web de portafolio personal utilizando solo JavaScript puro.

Mencioné en el otro artículo que aquí utilizamos i18n para detectar automáticamente el idioma del usuario. Sin embargo, no quería complicarme demasiado en mi portafolio personal para tenerlo listo más rápido y probar algo nuevo. Así que se me ocurrió una solución sencilla utilizando únicamente JavaScript.

Crear un array

Tengo un array muy simple con los IDs asignados a las diferentes cadenas en mi página web, como esto:

texts = [
  "skillstxt",
  "experiencetxt",
  "projectstxt",
  "title",
];

Crear JSONs

Cada JSON corresponde a un idioma y contiene los IDs mencionados junto con la cadena correspondiente en su idioma.:

en = {
  skillstxt: "Skills",
  experiencetxt: "Experience",
  projectstxt: "Projects",
  title: "Software Engineer",
};
es = {
  skillstxt: "Habilidades",
  experiencetxt: "Experiencia",
  projectstxt: "Proyectos",
  title: "Ingeniero de software",
};
fr = {
  skillstxt: "Compétences",
  experiencetxt: "Expérience",
  projectstxt: "Projets",
  title: "Ingénieur logiciel",
};

Además, hay un JSON vacío que más tarde tendrá la traducción para el idioma seleccionado.

La función de traducción

Con el array y los JSONs en su lugar, ahora simplemente podemos iterar a través del array. Para cada elemento, asignamos la cadena correspondiente a la clave del JSON al elemento HTML:

function translate() {
  texts.forEach((t) => {
    document.getElementById(t).innerHTML = json[t];
  });
}

Como mencioné antes, si queremos cambiar el idioma, simplemente asignamos el JSON del nuevo idioma al JSON del idioma actual y llamamos a la función de traducción para reemplazar las cadenas en el HTML:

function spanish() {
  json = es;
  translate();
}
function english() {
  json = en;
  translate();
}
function french() {
  json = fr;
  translate();
}

Como mencionado en mi ultimo post, estas opciones están disponibles al inicio de la página con el código ISO de cada idioma, no es la mejor opción, pero ayuda a ahorrar espacio.

Código completo en GitHub.

Más entradas

Cover Image for Como traduje mi portafolio con JavaScript y JSON

Como traduje mi portafolio con JavaScript y JSON

No quería complicarme demasiado en mi portafolio personal para tenerlo listo más rápido y probar algo nuevo. Así que se me ocurrió una solución sencilla utilizando únicamente JavaScript.

Ivan Orozco
Ivan Orozco
Cover Image for ¿Banderas para representar lenguajes?

¿Banderas para representar lenguajes?

¿Debería utilizar las banderas de los países con mayor población que habla ese idioma? ¿cuál es la mejor manera de diseñar las opciones para cambiar de idioma?

Ivan Orozco
Ivan Orozco
Cover Image for ¿Programar con emojis?

¿Programar con emojis?

Los emojis son realmente utiles en algunos casos, pueden añadir emociones a nuestros mensajes para que su verdadero significado no pase desapercibido, pero ¿deberiamos usarlos para programar?

Ivan Orozco
Ivan Orozco
Cover Image for La historia detrás de Easy Simple Job

La historia detrás de Easy Simple Job

La historia detrás de nuestro juego no es complicada, inspirado por un video narrando una historia en Reddit que cuenta la historia de un tipo que consigue un simple pero sospechoso trabajo en una oficina, y ciertas cosas perturbadoras suceden...

Ramen Development Team
Ramen Development Team
Cover Image for Queridos reclutadores de LinkedIn...

Queridos reclutadores de LinkedIn...

Es importante que los reclutadores se tomen el tiempo para revisar el perfil de un candidato antes de enviar una oferta de trabajo.

Ivan Orozco
Ivan Orozco
Cover Image for Autómata de analizador léxico

Autómata de analizador léxico

En este artículo aprenderás a realizar un autómata para de un analizador lexico.

Gustavo Padilla
Gustavo Padilla