לפעמים באג נראה קטן רק כי הוא מופיע במילה אחת. במקרה שלי, המילה הזאת הייתה השם שלי.
משתמשים נכנסו לאתר שלי, וגוגל החליט "לעזור" עם תרגום אוטומטי. התוצאה הייתה רגע מוזר: במקום לראות את השם שלי כמו שהוא אמור להופיע, הם ראו ג'יבריש. לא שגיאת JavaScript, לא layout שבור, לא API שנפל. פשוט דבר בסיסי מאוד בפרונט הראשון של האתר: השם שלי לא נשאר השם שלי.
וזה בדיוק סוג הבאג שמזכיר למה פרטים קטנים באתר אישי הם לא באמת קטנים.
הבעיה: תרגום אוטומטי לא מבין מה אסור לתרגם
גוגל Translate עובד טוב בהרבה מקרים, אבל הוא לא תמיד יודע להבדיל בין משפט רגיל לבין שם פרטי, לוגו, מותג או יחידת UI שאמורה להישאר קבועה.
באתר דו-לשוני זה נהיה רגיש עוד יותר. יש לי מנגנון i18n מסודר, עברית ואנגלית קיימות כתרגומים אמיתיים, והמשתמש יכול להחליף שפה מתוך האתר. אבל כשהדפדפן או גוגל מחליטים לבצע שכבת תרגום מעל האפליקציה, הם לא בהכרח מכבדים את הגבולות האלה.
מבחינת המשתמש, זה לא משנה מי אשם. אם ב-hero של הפורטפוליו השם שלי מופיע משובש, האמון נפגע מיד.
האבחון: זה לא היה רק טקסט, זה היה DOM
התיקון הראשון היה להבין שהשם בעברית לא צריך לקבל את אותה אנימציית אות-אחר-אות של האנגלית.
באנגלית, פירוק השם לתווים עובד יפה: כל אות יכולה להיכנס באנימציה קטנה. בעברית, במיוחד עם כיוון כתיבה, ניקוד אפשרי, ריווח ואלגוריתם bidi, פירוק כזה יכול ליצור תוצאה עדינה מדי לתפעול. לכן הפרדתי בין ההתנהגות של עברית ואנגלית: בעברית השם מוצג כיחידה אחת, באנגלית נשארת האנימציה התו-אחר-תו.
זה פתר חלק מהבעיה, אבל לא את כולה. כי גם אחרי שהרינדור בעברית היה נכון, תרגום אוטומטי חיצוני עדיין יכול היה להתערב.
הפתרון: להגדיר גבולות לתרגום
הפתרון הסופי היה שילוב של כמה שכבות קטנות:
- הוספת `meta name="google" content="notranslate"` ל-HTML הראשי.
- הוספת `translate="no"` על הלוגו הקצר `EH`.
- הוספת `translate="no"` על השם ב-hero, גם בגרסת עברית וגם בגרסת אנגלית.
- חידוד הגדרת i18n עם `supportedLngs` וקריאת השפה מתוך `localStorage` בצורה מפורשת.
הנקודה החשובה היא שלא הסתפקתי ב"נראה תקין אצלי". שמות, לוגואים וזהויות מותג צריכים להיות מסומנים כטקסט שאסור למכונת תרגום לשנות.
למה זה חשוב מעבר לבאג עצמו?
פורטפוליו הוא לא רק רשימת פרויקטים. הוא נקודת אמון.
כשמישהו נכנס לאתר שלי, השניות הראשונות קובעות אם הוא מרגיש שיש כאן אדם מקצועי שמקפיד על פרטים. אם הדבר הראשון שהוא רואה הוא שם משובש, כל שאר התוכן מתחיל בנקודת פתיחה פחות טובה.
זה גם שיעור רחב יותר על מוצר: לא כל באג מגיע מהקוד שכתבתי. לפעמים הבאג מגיע מהשכבה שמעל האתר: דפדפן, תוסף, תרגום אוטומטי, cache, SEO preview, או כלי חיצוני שמנסה "לעזור". מוצר טוב צריך להחזיק גם כשהסביבה מתערבת.
מה למדתי
יש טקסט שמותר לתרגם, ויש טקסט שצריך להישאר עוגן.
שם, לוגו, קיצור מותג, כתובת, מונחי מוצר מסוימים ו-CTA עדינים לא תמיד צריכים להיות בידיים של תרגום אוטומטי. אם האתר כבר תומך בשפות בעצמו, עדיף לתת למערכת התרגום הפנימית לנהל את החוויה ולא להשאיר את זה לניחוש של הדפדפן.
הבאג הזה היה קטן בשורות קוד, אבל לא קטן במשמעות. הוא הזכיר לי שפרונטאנד טוב הוא לא רק איך דברים נראים כשכל התנאים מושלמים. הוא גם איך שומרים על זהות, קריאות ואמון כשהעולם החיצוני מנסה לשנות את ה-DOM בשבילך.