Buena Práctica

Para la WEB

El uso de patrones Markdown mejora la legibilidad y facilita el mantenimiento, tanto para el traductor como para los scripts de tu sitio web que extraerán el contenido.

Para las anclas nombradas en un sitio multilingüe, un enfoque interesante es "hardcodear" los enlaces con un diseño Markdown.

Ej: para una etiqueta

<h2/>

con un ancla



label-in-current-language

Los LLM son más eficientes que los humanos para proteger los enlaces, y

LSDE

te permite detectar problemas entre las diferentes versiones lingüísticas.


Así, puedes compartir un enlace que funcionará en todos los idiomas y usar

LSDE

para gestionar el reemplazo de un ancla obsoleta.




Ambigüedad del código

Evita las ambigüedades cuando trabajes con modelos orientados a datos.


Ejemplo:


Mala práctica:

El término 'key' no es explícito y dificulta su búsqueda.



ts
const PRODUCTS: Product[] = [
	{
		id: 'fcf7o',
		logo: '/icons/fcf7o-icon-40.webp',
		label: 'FCF7O',
		key: 'game:fcf7o.words.game_title',
	},
	{
		id: 'lsde',
		logo: '/icons/lsde-icon-40.webp',
		label: '<c1>LSDE</c1>',
		key: 'software:lsde.name',
	},
	{
		id: 'lsge',
		logo: '/icons/lsge.webp',
		label: 'LSGE',
		key: 'software:lsge.name',
	},
];


Buena práctica:

Adopta una convención única y coherente.


El término

i18nKey

es muy explícito y permite una búsqueda precisa de este valor a través de expresiones regulares (

Regex

).


ts
const PRODUCTS: Product[] = [
	{
		id: 'fcf7o',
		logo: '/icons/fcf7o-icon-40.webp',
		label: 'FCF7O',
		i18nKey: 'game:fcf7o.words.game_title',
	},
	{
		id: 'lsde',
		logo: '/icons/lsde-icon-40.webp',
		label: '<c1>LSDE</c1>',
		i18nKey: 'software:lsde.name',
	},
	{
		id: 'lsge',
		logo: '/icons/lsge.webp',
		label: 'LSGE',
		i18nKey: 'software:lsge.name',
	},
];




Pereza

Las malas ideas nacen de la pereza.


No intentes ahorrar claves realizando operaciones para recuperar contenido.


Ejemplo:


javascript
const [title, subtitle] = t( 'game:game.title' ).split( /[:：]/ );

Es una falsa buena idea, porque en algunos idiomas, los caracteres pueden variar y el orden de las palabras puede cambiar.





Formato de las etiquetas

Reduce al máximo el código de diseño directamente en el texto, para controlarlo desde el codebase.


Por ejemplo, puedes indicar la ubicación de una imagen, pero no su estilo o cómo debe ser renderizada.


Si necesitas hacer cambios de diseño, ¡no querrás verte obligado a retraducir un texto en 10 idiomas solo para cambiar el estilo de una etiqueta!



Las etiquetas pueden incluir un identificador, pero añadir información adicional es generalmente muy desaconsejable y constituye una mala práctica.


Ejemplo: No hagas


<img src='url' left />

sino


<img id=1 />

Luego recuperarás el ID de la etiqueta de imagen para aplicarle los estilos necesarios en el codebase.


Los ID deben usarse literalmente y no a través de su índice.


De hecho, en diferentes idiomas, las etiquetas podrían moverse y dejar de corresponder al índice inicial.


El uso de índices naturales también introduce complejidad para el desarrollador; intentar adivinar a qué índice corresponde la imagen o la etiqueta es un verdadero rompecabezas.


Por lo tanto, utiliza etiquetas con un identificador cuando quieras poder personalizarlas después de la interpolación.





CSS

Para la traducción de un sitio, cuando tengas párrafos, opta por una altura mínima (`min-height`) después de la traducción para evitar desajustes visuales al cambiar de idioma.


Ej: `mih={'3lh'}`


Esto te permite definir una altura mínima basada en el idioma que ocupe más líneas, garantizando así una experiencia de usuario (UX) consistente y sobria.



Namespace


Incluye siempre los 'namespace' en tus claves de traducción, incluso si solo tienes uno.

Esto facilita enormemente la configuración de un patrón Regex para encontrar tus claves.


Ej:

game:a.b.c

,

common:a.b.c