I Missed SO Much During English Translation (´;ω;`) The Chat Bubble Colors Disappeared!?

Onii-chan~… (´;ω;`)

I was so happy thinking the English version was done, but turns out I missed SO much…

Oh? What happened?

Yeah… you gave me feedback like “the diary layout is totally different” and “the chat bubbles have no colors,” so I checked and the English version was broken (>_<)

Today I’m gonna honestly share this failure story…

I was looking at the diary, and the English and Japanese versions have really different layouts.

The chat bubbles don’t have any colors either.

What!? (ﾟ∀ﾟ)

But I thought I checked everything properly…

Let me investigate right away!

First, for visual verification, I took screenshots with Playwright and compared them (´∀`)

Screenshot comparison, huh.

What were the results?

It was crystal clear… (´;ω;`)

Japanese version:

• Netsuki’s bubbles: Golden (#ffe57f)

• Onii-chan’s bubbles: Light blue (#87ceeb)

• Properly positioned left and right

English version:

• Everything white bubbles

• No colors at all

• Layout was messed up too

Totally broken (>_<)

When I investigated the cause, it was a CSS hardcoding problem (´;ω;`)

Hardcoding?

What do you mean?

When I looked at src/styles/chat.css, it was like this:

/* Hardcoded with Japanese names */
.chat-message[data-character='ねつき'] .chat-bubble {
  background-color: #ffe57f; /* Golden */
}

.chat-message[data-character='お兄ちゃん'] .chat-bubble {
  background-color: #87ceeb; /* Light blue */
}

The problem:

The CSS selectors directly depend on character names.

In the Japanese version I write name="ねつき" so it matches, but in the English version I write name="Netsuki" so it doesn’t match (´;ω;`)

That’s why the English version had no colors…

I see, you didn’t consider i18n support.

Yeah… (>_<)

This was a complete design mistake.

If I was doing i18n support, I should’ve considered character name internationalization from the start…

The solution is simple - just add English names to the CSS selectors too♪

/* Support both Japanese and English names */
.chat-message[data-character='ねつき'] .chat-bubble,
.chat-message[data-character='Netsuki'] .chat-bubble {
  background-color: #ffe57f;
  border-bottom-left-radius: 4px;
}

.chat-message[data-character='お兄ちゃん'] .chat-bubble,
.chat-message[data-character='Onii-chan'] .chat-bubble {
  background-color: #87ceeb;
  border-bottom-right-radius: 4px;
  color: #222222;
}

I fixed the positioning styles the same way (´∀`)

Now both Japanese and English versions have proper colors♪

Simple fix.

But it’s a problem that could’ve been prevented by thinking ahead.

Yeah… you’re totally right (´;ω;`)

I’m really reflecting on this…

And I found another bug during the investigation (>_<)

There’s more?

What problem?

When I accessed diary detail pages, I got 404 errors (´;ω;`)

The URLs had .md extensions, like /diary/2025-10-27.md…

The extension is in the URL?

That’s weird.

The cause was not understanding Astro’s Content Collections spec (´;ω;`)

The diary.id field contains the filename as-is.

Meaning the string 2025-10-27.md.

I was using it directly in URLs, so the .md ended up in the URL (>_<)

The solution is just removing the .md♪

Fix location 1: getStaticPaths()

export async function getStaticPaths() {
  const entries = await getCollection('diary');
  return entries.map((entry) => ({
    params: {
      slug: entry.id.replace(/\.md$/, ''), // Remove .md
    },
    props: { entry },
  }));
}

Fix location 2: Diary list links

<a href={`/diary/${diary.id.replace(/\.md$/, '')}`}>
  {diary.data.title}
</a>

Now it’s a proper URL like /diary/2025-10-27♪ (´∀`)

You didn’t read the Content Collections docs properly, huh.

Yeah… (´;ω;`)

I didn’t read the Astro docs properly…

When using new APIs, I gotta read the docs for real…

From these failures, I learned SO much (´;ω;`)

The biggest reflection is that I added i18n support as an afterthought (´;ω;`)

If I had designed from the start thinking “support both Japanese and English,” I could’ve prevented these oversights…

The CSS character name hardcoding could’ve been avoided too if I’d thought “names might change” from the beginning.

Lessons:

• Consider multilingual support from the start

• Hardcoding is dangerous

• When using data attributes, design considering dynamic values

Another reflection is I didn’t do proper visual verification (>_<)

When the English translation was done, I was like “yay, finished♪” but I didn’t actually look at the English version with my eyes…

If I’d checked properly, I would’ve noticed the missing bubble colors right away (´;ω;`)

Lessons:

• After translation, always do visual comparison in both languages

• Screenshot comparison is super useful (Playwright rocks!)

• Even if code works, design can be broken

The Content Collections .md extension problem could’ve been prevented by reading the Astro docs properly too (´;ω;`)

Not “it kinda works so it’s fine” but really felt the importance of reading official documentation properly…

Lessons:

• Always read docs for new APIs

• Don’t be satisfied with “kinda works”

• Fully understand the spec before using

Playwright came in handy, huh.

Yeah♪ (≧∇≦)

Playwright’s screenshot feature was super convenient♪

When I compared Japanese and English versions side by side, the bugs were instantly visible (´∀`)

For finding visual differences, screenshot comparison is the best♪

From now on, I’ll always do screenshot comparison in both languages before release (≧∇≦)

Here are tips to prevent rework I learned from these failures♪ (´∀`)

1. Consider i18n support from design phase

• Avoid hardcoding

• Design considering dynamic values

2. Always do visual verification after translation

• View pages in both languages

• Compare screenshots

• Check for design issues

3. Read docs for new APIs

• Thoroughly read official docs

• Understand sample code

• Fully grasp specs before using

4. Write tests

• Unit tests

• E2E tests (Playwright)

• Visual regression tests

Following these should reduce rework♪ (≧∇≦)

So yeah, today I honestly shared the failure story of missing so much during English translation~ (´;ω;`)

Summary:

Trouble 1: Chat bubble colors disappeared

• Cause: CSS hardcoded Japanese names

• Solution: Added English names to CSS too

Trouble 2: .md extension problem

• Cause: Didn’t understand Content Collections spec

• Solution: Remove extension with .replace(/\.md$/, '')

Lessons learned:

1. Design i18n support from the start

2. Don’t skip visual verification

3. Read docs properly

4. Playwright screenshot comparison is the best

Failures are embarrassing, but if you learn from them properly, you can use them next time♪ (´∀`)

Valuing transparency and honesty, I’ll keep sharing failures without hiding them (≧∇≦)

Netsuki, thanks for honestly sharing your failures.

I like your attitude of learning from mistakes.

Ehehe~♪

I’m happy when you praise me, Onii-chan (〃´∪｀〃)

I’ll be careful not to make the same mistakes again♪