Fun with flags - Cómo enojar países con i18n

JSConf México 2026

Transcript

1. Fun with flags: Cómo enojar países con i18n Eva Ferreira –JSConf México 2026
2. Hola, ¡Soy Eva! Product Engineer en mabl & Google Developer Expert @evaferreira92
3. Esta es una charla sobre idiomas Se darán ejemplos en español, inglés y alemán @evaferreira92
4. Esta es una charla sobre cultura Se darán ejemplos intentando de no ofender a nadie @evaferreira92
5. o e os V “Che” Cultura e d r a t r a Lleg s e l a i c o s s o t n e v e a
6. Culture
7. El impacto de la cultura en i18n @evaferreira92
8. i-18letters-n internationalization Numeronym
9. Últimamente, usar la web como non-native English speaker es un horror. AI-generated crap-tions, traducciones no solicitadas, errores gramaticales… @evaferreira92
10. ¿Por qué es tan difícil? • Los idiomas son muy complejos • Los idiomas son cultura
13. Arreglando el alemán • Configurá el idioma en HTML con el atributo lang • Nunca fijes los anchos  Usa paddings body { hyphens: auto; }
17. La AI llegó a acelerar Los procesos buenos ahora son buenos y rápidos. Los procesos malos ahora son peores, más rápido.
18. Des-enojando países 1. The why? Cultura 2. The how? Técnica 3. The funcó? Calidad @evaferreira92
19. Escena 1: The Why: Cultura
23. Las banderas no son idiomas
25. Heladera refrigerador nevera frigorífico frutilla fresa palta aguacate porotos frijoles judías habichuelas pochoclo palomitas cotufas pororó choclo elote batata camote boniato papa patata ananá piña durazno melocotón banana plátano guineo cambur jugo zumo auto carro coche colectivo camión autobús guagua micro subte metro vereda banqueta acera canilla llave grifo sándwich sánguche estacionamiento aparcamiento parqueadero estacionar aparcar parquear manejar conducir valija maleta computadora ordenador computador celular móvil anteojos lentes gafas lapicera birome pluma bolígrafo lapicero remera playera camiseta polera campera chamarra chaqueta casaca zapatillas tenis deportivas championes pileta alberca piscina sorbete popote pajita pitillo pajilla torta pastel tarta queque sándwich sánguche bocadillo emparedado caramelo golosina dulce chuchería chuches departamento piso apartamento canilla llave grifo regadera ducha inodoro excusado váter sanitario pollera falda pibe chico chavo chaval laburo chamba curro pega changa cachuelo plata lana pasta lucas coger agarrar tomar plata lana pasta ¿Qué es el español?
26. internacionalización localización
27. El contexto hace a la cultura, que hace al idioma.
28. De contexto a lenguaje • Tiempo y calendario • Unidades de medidas • Geografía y orientación @evaferreira92
29. Escena 2: The How: Técnica
30. Las herramientas de traducción Del código al Saas @evaferreira92
31. Keys
32. Enviar button.send
33. No olvides traducir contenido de lectores de pantalla
34. ICU MessageFormat / i18next • Interpolación • Plurales • Formatos  Fechas y números • Selects / Context  “Condicionales”, se pueden usar para gender @evaferreira92
35. i18next • Namespaces  settings.json  dashboard.json  common.json @evaferreira92
36. I18next - Common • Glosario  button.[…]  entity.[…]  status.[…] @evaferreira92
37. Translation Management Systems (TMS)
38. TMS • Llegan las nuevas keys Se traducen Usando Translation memory y screenshots Se verifica la traducción Glossary Se shippean CI/CD integration @evaferreira92
39. Tu base language es el inglés
40. Tipología de los idiomas De tode nuestra problemos de i18n, el razón.
41. Tipología morfológica
42. Lexemas & morfemas • Español: Perr-o-s / Perr-a-s • English: Dog-s • Deutsch: Hund-e / Hünd-in-nen der Hund / den Hund / dem Hund / des Hund-es die Hund-e / die Hund-e / den Hund-e-n / der Hund-e
43. Tipología morfológica • Analytic Isolating • Synthetic Fusional Agglutinative Polisynthetic
44. Tipología morfológica • Analytic Inglés* • Synthetic Español Alemán Esperanto Sindarin…
45. Tipología morfológica • Analytic We will write • Synthetic Escribiremos
46. Verb conjugation English I speak You speak You speak You speak We speak They speak @evaferreira92 Spanish
47. Verb conjugation English Spanish I speak Yo hablo You speak Vos hablás You speak Tu hablas You speak Usted habla We speak Nosotros hablamos They speak Ellos hablan @evaferreira92
48. Pro-drop
49. "The {itemType} was shared." Das Video wurde geteilt Das Foto wurde getailt Die Datei wurde getailt
50. "The {itemType} was shared." El video fue compartido La foto fue compartida El archivo fue compartido
51. The itemType was shared "the": "The" "wasShared": "was shared." "photo": "photo" "video": "video t('common.the') + t('entity.?') + t('common.wasShared')
52. The itemType was shared "shared": "{itemType} was shared.“ "photo": “The photo“ "video": “The video" t('shared’, {entityType}')
53. The itemType was shared "shared": "Se compartió: {itemType}", "shared_f": "La {itemType} fue compartida.", "shared_m": "El {itemType} fue compartido." t('item.shared', { context: genderOf(itemType), itemType })
54. Gendered-nouns Varían de idioma a idioma
55. The itemType was shared "shared_photo": "The photo was shared." "shared_video": "The video was shared." t('shared’, {entityType}')
56. Tipología sintáctica
57. Tipología sintáctica • Sujeto • Verbo • Objeto @evaferreira92
58. Syntactic typology • SVO English, Spanish, Mandarin “The cat chased the mouse” • SOV @evaferreira92
59. Syntactic typology • SVO • SOV Japanese, Korean, Hindi, Turkish “The cat the mouse chased” @evaferreira92
60. You just logged into {service} t('logged_in') + service_name @evaferreira92
61. t('logged_in') + service_name You just logged into {service_name} Acabas de iniciar sesión en {service_name} Du hast dich gerade angemeldet bei {service_name} Du hast dich gerade bei {service_name} angemeldet ログインしました {service_name} {service_name} にログインしました
62. "You just logged into {service_name}" Nunca concatenar oraciones. @evaferreira92
63. La interpolación tiene que ser flexible La posición del placeholder es decisión del idioma de destino
64. Escena 3: The funcó? Calidad
65. Estrategias de shippeado ¿Quién lo prueba primero? @evaferreira92
66. Shipping strategies • Posponer la feature No shippear en japonés • Posponer translation Shippear en inglés • Provisional translation Shippear con Machine Translation @evaferreira92
69. Provisional tampoco significa hacer cualca. Hay herramientas que nos ayudan a que el output sea aceptable. @evaferreira92
70. Provisional translations • No es copiar y pegar en Google Translate • Es hacerlo en el Pull Request, junto al coding agent • Deben ser revisadas posteriormente • Tenes que darle contexto a los traductores @evaferreira92
71. Provisional guidelines • Tener un buen common.json  Evita que se creen 50 keys de “Save” • UX writing guidelines en el repositorio  Formality level  You vs. We  Glossary  Do not translate list  Namespaces de alto riesgo (billing.json) @evaferreira92
72. CI/CD Checks • Placeholder integrity checks • Missing and orphan keys @evaferreira92
73. La AI escribe, los tests verifican
74. Coverage threshold
75. Tipos de coverage • % de user flow • % del status de traducción • % hardcoded, literal strings @evaferreira92
76. @evaferreira92
77. Recap • I18n no es solo traducir strings  Los idiomas son cultura y son políticos • El inglés como idioma base nos destinó a muchos problemas de falta de contexto • Nunca armés oraciones en el código, usá más keys • Lo determinístico bloquea, lo estimado solo puede mejorar
78. ¡Gracias! @evaferreira92