Bakerversity
Module 3: How Software Organizes Human IdeasLesson 3 of 8

Lab 3.1: Variable Symmetry & Syntax Inspection

Act as a localization engineer performing automated and visual QA on dynamic string assets.

Objective

In this hands-on lab, you will act as a localization engineer performing automated and visual QA on dynamic string assets. You will identify and fix broken string concatenation traps, resolve variable naming mismatches across languages, and reorder positional placeholders to conform to target language grammar without breaking runtime variable mapping.

Required Setup & Prerequisites

  • Editor: Visual Studio Code installed.

  • Working Directory: Open your loc_lab working directory in VS Code.

Step-by-Step Instructions

Step 1: Create the Broken Multilingual Assets

Let's create two files: a source English file (en_source.json) and a broken Japanese target file (ja_target.json) that contains string concatenation errors and variable symmetry defects.

  1. Open VS Code and navigate to assets/loc/software/.

  2. Create en_source.json and paste:

    JSON

    json
    { "welcome_msg": "Welcome back, {username}!", "item_count": "Page {0} of {1}", "transfer_status": "Transferred {amount} to {recipient} successfully." }
  3. In the same folder, create ja_target.json and paste the corrupted translation asset:

    JSON

    json
    { "welcome_msg": "お帰りなさい、{userName}様!", "item_count": "{0} ページ / 全 {1} ページ", "transfer_status": "{recipient} へ {amt} の送信が完了しました。" }
  4. Save both files (Cmd + S on macOS / Ctrl + S on Windows).

Step 2: Open Split View & Inspect Variable Mismatches

In localization pipelines, variable names act as code identifiers. If a translator changes {username} to {userName} or {amount} to {amt}, the software runtime will fail to replace the placeholder, displaying raw code tags to end users.

  1. Open en_source.json in VS Code.

  2. Split your editor view to inspect source and target side-by-side:

    • macOS: Press Cmd + \

    • Windows: Press Ctrl + \

  3. In the new right-hand pane, open ja_target.json.

  4. Inspect line 2 (welcome_msg):

    • Source: {username} (all lowercase)

    • Target: {userName} (camelCase)

    • Defect: Variable name mismatch! The runtime parser will fail to populate {userName}.

  5. Inspect line 4 (transfer_status):

    • Source: {amount}

    • Target: {amt}

    • Defect: Abbreviated variable name breaks runtime data binding.

Step 3: Reorder Positional Placeholders for Target Grammar

Examine line 3 (item_count):

  • English Source: "Page {0} of {1}" (where {0} = current page, {1} = total pages)

  • Japanese Target: "{0} ページ / 全 {1} ページ"

In Japanese grammar, specifying the total page count before the current page number sounds significantly more natural in UI headers: "Out of {1} pages, page {0}" (全 {1} ページ中 {0} ページ).

  1. If you swap unindexed placeholders like %s / %s, variable values map to the wrong parameters.

  2. Because indexed placeholders ({0}, {1}) are used, you can safely swap their order in the string:

    JSON

    json
    "item_count": "全 {1} ページ中 {0} ページ"
  3. Runtime result: If {0} = 1 and {1} = 10, the UI correctly renders "全 10 ページ中 1 ページ" without modifying backend application code.

Step 4: Remediate and Clean ja_target.json

Fix all variable symmetry and placeholder errors in ja_target.json:

  1. Update line 2: Change {userName} to match source {username} verbatim.

  2. Update line 3: Ensure positional placeholders {0} and {1} are correctly formatted in natural Japanese word order.

  3. Update line 4: Change {amt} to match source {amount} verbatim.

Your finalized ja_target.json should match this clean state:

JSON

json
{ "welcome_msg": "お帰りなさい、{username}様!", "item_count": "全 {1} ページ中 {0} ページ", "transfer_status": "{recipient} へ {amount} の送信が完了しました。" }
  1. Save the file as ja_clean.json.

Self-Verification Checklist

Check your remediated asset against these technical parameters before proceeding:

  • [ ] Every placeholder name in ja_clean.json ({username}, {amount}, {recipient}) matches en_source.json verbatim (case-sensitive).

  • [ ] Positional placeholders ({0}, {1}) maintain valid brace syntax and index numbering.

  • [ ] Side-by-side editor view (Cmd + \ / Ctrl + \) verifies 1:1 variable symmetry across keys.

  • [ ] Asset is saved as valid JSON with UTF-8 encoding.


Ready to move on?

Mark this lesson complete when you’re ready.

→ Sign in to track your progress