GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

i18n JSON Checks: 9 Ways to Catch Missing Keys

· Godrich · 9 items · 11 min read

LocalizationVanilla JSReactManualLanding page

i18n JSON files break quietly: a key missing from en.json leaves a button empty, and a stray {name} placeholder ships without a value.

The two-file language pack01 language-pack-json Keys present in one locale only02 missing-key-check {placeholder} mismatches03 placeholder-mismatch Untranslated Korean left behind04 korean-residue-scan The t() function that wires it up05 t-function Hardcoded text that skips the pack06 hardcoded-scan Raw keys leaking to the screen07 fallback-key Per-language URLs and hreflang08 locale-url Dates and numbers per locale09 date-number-format

Auto-plays · click a tile to jump to its section · all nine in one zip

The nine follow the order a second locale actually breaks in. Start with the two-file skeleton (01), the plainest translation json file layout there is, and the keys that exist on only one side (02), then look inside the sentences for placeholder mismatches (03) and untranslated Korean left behind (04). Check the t() function that wires the pack to the screen (05), catch hardcoded text that skips the pack entirely (06) and raw keys leaking through (07), then step outside the page to per-language URLs and hreflang (08) and date and number formats (09).

01The two-file language pack

What an i18n json file looks like

Keys from ko.json and en.json fan out into matching rows so the two files line up side by side, and a key that exists on only one side leaves an empty slot that catches the eye immediately.

The two-file language pack
Open in a new tab

01 · The two-file language pack — Measured area 46.337% · moving frames 21/23Original by GODRICH · SCSS and React ship in the zip · See the password

@keyframes scan-down같은 구조 원칙키 펼쳐 보기

Where to look in the code

Run this the first time a second locale gets wired up, or whenever a new translation file is added.

const flatten = (o, p = "") =>
  Object.entries(o).flatMap(([k, v]) =>
    v && typeof v === "object"
      ? flatten(v, p ? `${p}.${k}` : k)
      : [`${p ? p + "." : ""}${k}`]
  );

const load = async (l) =>
  flatten(await (await fetch(`/locales/${l}.json`)).json());

const ko = await load("ko");
const en = await load("en");
console.log(ko.length, en.length);  // if the counts differ, the skeleton itself is off

02Keys present in one locale only

What happens on screen

Key rows in both columns light up and fill in order, but the one missing on either side stays dark while a red defect mark points at the gap.

Keys present in one locale only
Open in a new tab

02 · Keys present in one locale only — Measured area 52.565% · moving frames 21/23Original by GODRICH · SCSS and React ship in the zip · See the password

animation-delay: calc()차집합Set

How to read the code

It's the check for when a button comes back empty only in English, or when a new key only made it into Korean.

const onlyIn = (a, b, label) => {
  const set = new Set(b);
  return a.filter((k) => !set.has(k)).map((k) => `${label}: ${k}`);
};

const gaps = [
  ...onlyIn(ko, en, "ko-only"),
  ...onlyIn(en, ko, "en-only"),
];

console.log(gaps);
// → a line like "ko-only: nav.mypage" for every key missing on one side

03{placeholder} mismatches

What moves

A {name} chip inside the sentence highlights like a marker pen while each locale gets swept, and a sentence missing that chip gets a warning badge that shakes into place.

{placeholder} mismatches
Open in a new tab

03 · {placeholder} mismatches — Measured area 6.635% · moving frames 22/23Original by GODRICH · SCSS and React ship in the zip · See the password

content: attr(data-t)집합 비교치환 누락

What to change

Useful when a greeting drops the user's name in one language, or when a quantity or date variable leaks out raw.

const ph = (s) => [...String(s).matchAll(/\{(\w+)\}/g)].map((m) => m[1]);
const sameSet = (a, b) =>
  a.length === b.length && a.every((x) => b.includes(x));

const koOrder = "{name}님, 주문이 {count}건 접수되었습니다";
const enOrder = "{count} orders placed for {name}";

console.log(sameSet(ph(koOrder), ph(enOrder)));   // true

const koRefund = "{date}에 환불이 완료되었습니다";
const enRefund = "Refund completed";
console.log(sameSet(ph(koRefund), ph(enRefund))); // false: {date} is missing

04Untranslated Korean left behind

What you see

A scan line sweeps down the English lines and dyes only the Hangul syllables red as it passes, ticking a residue counter up with every hit.

Untranslated Korean left behind
Open in a new tab

04 · Untranslated Korean left behind — Measured area 59.183% · moving frames 19/23Original by GODRICH · SCSS and React ship in the zip · See the password

/[가-힣]/ 정규식비-ko 파일 스캔잔존 카운트

Where to look in the code

It's the check to run right after machine translation, whenever Korean still shows through on the English page.

const hangul = /[가-힣]/;
const enJson = await (await fetch("/locales/en.json")).json();

const residue = Object.entries(enJson).filter(
  ([k, v]) => typeof v === "string" && hangul.test(v)
);

console.log(residue);
// → [["shipping", "배송이 시작되었습니다."], ["refund", "환불이 처리되었습니다."]]

05The t() function that wires it up

What happens on screen

Key cards ride a conveyor into the t() box and come out as the current language's phrase, while a locale lever flips between ko, en, and ja to swap the output for the same key.

The t() function that wires it up
Open in a new tab

05 · The t() function that wires it up — Measured area 14.826% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

t('키') 8줄언어 전환키 오타 검출

How to read the code

These eight lines are the baseline for wiring language files to the screen, and for spotting a typo'd key that returns an empty string.

const get = async (l) => await (await fetch(`/locales/${l}.json`)).json();
const packs = { ko: await get("ko"), en: await get("en"), ja: await get("ja") };
let lang = "ko";

function t(key, vars = {}) {
  let s = packs[lang][key] ?? packs.ko[key] ?? key;
  for (const [k, v] of Object.entries(vars)) {
    s = s.replaceAll(`{${k}}`, v);
  }
  return s;
}

console.log(t("cta.start"));   // Get started
console.log(t("cta.startX"));  // cta.startX unchanged → signals a typo

06Hardcoded text that skips the pack

What moves

A scan line walks the code lines one by one, and only the hardcoded Korean stuck between tags freezes red while the rest slide past untouched.

Hardcoded text that skips the pack
Open in a new tab

06 · Hardcoded text that skips the pack — Measured area 58.947% · moving frames 20/23Original by GODRICH · SCSS and React ship in the zip · See the password

태그 사이 한글 패턴t() 미사용 탐지소스 스캔

What to change

It catches text that survives a language switch, including labels an AI assistant dropped straight into the markup.

// Korean text stuck between tags = it skipped the language pack
const between = />\s*[가-힣][^<]*</g;
const hits = [...new Set(
  (document.body.innerHTML.match(between) || [])
    .map((s) => s.slice(1, -1).trim())
)];

console.log(hits);
// → ["구매하기", "자주 묻는 질문", "배송 안내"]

07Raw keys leaking to the screen

What you see

A screen card shows the raw key welcome.title, then a fallback phrase pushes up from below to replace it before the raw key returns, looping between the two states.

Raw keys leaking to the screen
Open in a new tab

07 · Raw keys leaking to the screen — Measured area 16.472% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

폴백 언어키 노출 검출@keyframes fb-in

Where to look in the code

Run it when a button slot literally shows header.title, or when deciding the fallback-language rule.

const keyShape = /^[a-z0-9]+(\.[a-z0-9]+)+$/;

const leaks = [...document.querySelectorAll("button, a, h2, p, span")]
  .filter((el) => el.children.length === 0)
  .map((el) => el.textContent.trim())
  .filter((s) => keyShape.test(s));

console.log(leaks);  // → text like "welcome.title" leaking out in raw key shape

08Per-language URLs and hreflang

What happens on screen

A link trace orbits between the /, /en/, and /ja/ nodes pointing at each other, until the one broken direction sprouts a red question mark that flags the one-way link.

Per-language URLs and hreflang
Open in a new tab

08 · Per-language URLs and hreflang — Measured area 3.252% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

hreflang 쌍언어별 URLreturn 링크

How to read the code

It's the fix for when only the English version gets indexed, or a language tab lands on a 404.

const want = ["ko", "en", "ja"];
const have = new Set(
  [...document.querySelectorAll('link[rel="alternate"][hreflang]')]
    .map((t) => t.getAttribute("hreflang"))
);

const missing = want.filter((l) => !have.has(l));
console.log(missing);  // → ["ja"] means this page has no bridge over to ja

09Dates and numbers per locale

What moves

One date card flips like an arrival board through the ko, en, and ja formats, swapping thousands separators along the way.

Dates and numbers per locale
Open in a new tab

09 · Dates and numbers per locale — Measured area 21.252% · moving frames 17/23Original by GODRICH · SCSS and React ship in the zip · See the password

@keyframes flap로케일 서식숫자 구분자

What to change

Reach for it when order dates look odd, or a price's comma lands in the wrong spot — and let Intl handle the formatting instead of hand-rolling it.

const d = new Date(2026, 8, 11);   // September 11 (months are 0-indexed)
const price = 1234567;

for (const lang of ["ko", "en", "ja"]) {
  const date = new Intl.DateTimeFormat(lang, { dateStyle: "long" }).format(d);
  const num = new Intl.NumberFormat(lang).format(price);
  console.log(lang, date, num);
}

Where it breaks — key-shaped domains fool the raw-key check

This is what happened when check 07 ran against this very site. It correctly caught text that had leaked out as a raw key, but it also flagged plain link text reading "godrichstory.com" — a run of dotted lowercase characters matches the same shape as a key, so shape alone always lets a few false positives through. The fix is to cross-check whatever gets flagged against the real key list from check 02's flatten output: if the string shows up there, it's a genuine leak, and if it doesn't, it's just a domain or version string that happens to look the same. The zip's nine folders open with the password fnn2hd5e, typed exactly as it appears on screen. Check 08 hides a matching trap — confirming a hreflang tag exists on every page misses whether the per-language URLs actually point back at each other, and this page can link forward to ja while the ja page carries no return link, which search engines read as a one-way relationship rather than a pair.

Accessibility

All nine fall back to animation: none under prefers-reduced-motion: reduce, and each stops on a frame that still makes sense. Items 01, 02, 04, and 06 freeze just the scanning or filling motion, leaving the empty slots and red residue or badges in place so the problem stays visible. Item 07 stops with the fallback phrase already shown, and item 08 stops with the broken arc and question mark visible, while item 09 parks on the ko-formatted card. The setup mirrors MDN's prefers-reduced-motion page.

FAQ

Do I need to know how to code to run these checks?

No — paste any of the nine straight into your browser's developer console and the result prints immediately. The zip also bundles all nine into a single script, so swapping in your own site's URL is the only change needed. How this site verifies its own demos and scripts is written up on the About page.

Will running these checks change anything on the site or slow it down?

No. Every one of them only reads the screen or a file, and none of them writes a value or sends anything to a server. The fetch calls that pull in the language pack JSON just re-read what the browser already cached, so there's no noticeable slowdown.

Does this i18n json structure still work if the site is built with React?

Yes. Checks 01 through 04 look only at the language pack JSON files, so it doesn't matter what rendered the screen. Check 05's t() is a bare-bones example — if the site uses a library like react-i18next, apply the same idea to that library's function instead. More checks like this turn up under "i18n" on site search.

Enter the archive password

The password is inside this article. You will find it as you read.