Forem: Nazarii

AI gives you exactly what you feed it!

Nazarii — Fri, 11 Jul 2025 13:41:17 +0000

AI Translation Gets Visual

Nazarii ・ Jul 11

#webdev #ai #react #coding

AI Translation Gets Visual

Nazarii — Fri, 11 Jul 2025 13:40:46 +0000

We've all been there: your AI translator suggests "Delete File" when your users expect "Remove File."

Why does it happen? Lack of context!

Tolgee found a way to improve this!

Translation tools process strings in isolation, missing crucial visual and situational cues that make translations feel natural.

The Context Problem

AI translation has gained popularity because it sounds more natural than traditional tools like DeepL, but it is still bad without proper context.

Visual Context

Tolgee's new AI Playground introduces screenshot-based translation. We think that it is gonna be a crucial tool. Here is why we added it and how it is better than regular translation engines:

Here's how it works:

No-Prompt Solution

Simply click "Customize" in the Machine translation menu. The AI playground lets you toggle context elements:

Project descriptions
Key descriptions
Language notes
Screenshots for visual context

Screenshots provide AI with crucial information about user interfaces, ensuring translations fit the actual context where they'll appear.

You can even assign specific prompts to different languages - perfect for handling regional dialects like Latin American Spanish vs. Iberian Spanish.

Testing Your Setup

Before committing to full translation runs, you can:

Batch preview: Test on filtered keys
Dataset preview: Tag specific keys with ai-playground for targeted testing

Conclusion

Visual context through screenshots transforms AI translation into a precise localization tool. While screenshots increase processing time and costs, the accuracy gains make it worthwhile for critical translations.

The future of localization isn't just about better AI - it's about giving AI the context it needs to make smart decisions.

Check out Tolgee's blog post about how we use screenshots in the AI playground to get started.

Tolgee is the future of localization

Nazarii — Wed, 11 Jun 2025 08:12:25 +0000

Fadil Natakusumah

Jun 11 '25

i18n With Tolgee

#webdev #javascript #tolgee #react

Comments 4

2 min read

🔓5 Open Source Tools That Changed My Development Workflow Forever

Nazarii — Fri, 16 May 2025 16:34:18 +0000

Doing the same thing and expecting a different outcome is a sign of insanity. So why are so many developers getting stuck with the same tools, expecting better results?

The right tools don't just save time, they change how we work and think. These five open-source tools and apps have improved my work and made it impossible to work without them anymore. I'm sharing these five tools not because they're the newest or popular, but because they've genuinely transformed my work. Let's dive in!

1. Tolgee: Localization

Managing translation files across multiple languages, providing context for translators, and keeping everything in sync is just the start of what you have to keep track of when you want your product to be accessible for multiple languages and go global. Tolgee does all of that and saves tons of time for devs with smart translation integration. You can easily delegate translation or use AI features to instantly translate with context included!

Tolgee is an open-source localization platform that changed how I approach internationalization.

(Don't forget to star it on GitHub!)

Tolgee supports many integrations, including React, Vue, Svelte and even lets you translate Unreal Engine projects. Here is an example of how to use it with React:

import { useTranslate } from '@tolgee/react';

function Component() {
  const { t } = useTranslate();

  return <div>{t('key_to_translate', 'DEFAULT VALUE')}</div>;
}

2. Helmfile: Taming the Kubernetes

Kubernetes is powerful but complex. I was struggling with Helm charts across dev, staging, and production environments.

Helmfile fixed that problem for good.

Why Helmfile Changed Everything:

One config for all environments: Write once, run anywhere
Git-based configs: My cluster setup lives in version control
Smart dependencies: Charts install in the right order

3. Zx: Simple Shell Scripts

Shell scripts are essential but painful. Bash syntax is cryptic, error handling barely exists, and maintenance is a nightmare.

Zx solves these problems by letting you write shell scripts in JavaScript or TypeScript. It is maintained by Google and is perfect if you are a JS lover.

4. Fx: Better Command Line

Working with APIs means constantly working with JSON data. Traditional approaches like piping to jq or opening files in editors can break your flow, Moreover, it requires learning yet another syntax. But what if you could use something you already know? JSON!

Fx improves this with an interactive JSON processor made for developers. It combines viewing capabilities with powerful transformation functions that make complex data manipulation simple.

But its real power comes from JavaScript transformations that let you extract exactly what you need:


bash
# Extract all user emails from an API response
curl https://api.example.com/users | fx 'x => x.users.map(u => u.email)'

# Find items matching specific criteria
cat data.json | fx 'x => x.filter(i => i.status === "active" && i.price > 100)'

Fx has eliminated countless throwaway scripts and can help you reduce API debugging time from minutes to seconds. For anyone working with JSON (which is almost every web dev), it's an essential tool.

5. Refined GitHub

If you are an advanced GitHub user, you know its interface has limitations. Small problems and issues add up over time and slow down your workflow.

Refined GitHub addresses these issues with a lot of improvements that can make GitHub more productive. Some great features that it has:

File tree navigation for pull requests
Code review tools with better diffing
Better file editing and commit
CI status details without leaving the page

The extension is well-maintained, with frequent updates as GitHub's interface evolves. It has a great balance between adding functionality and keeping a familiar GitHub feeling.

Conclusion

Productivity isn't just about saving time. You should also take into account the mental bandwidth that you use for the boring and complex tasks that you can potentially improve, but it takes a little time to learn. When your tools work with you instead of against you, you have more energy for solving the problems that actually matter.

What tools have transformed your workflow? Share your discoveries in the comments

Localization is often overlooked. I hope to help fix that :)

Nazarii — Thu, 08 May 2025 12:55:54 +0000

Nazarii for Tolgee

May 8 '25

Go Global or Die Trying (A Guide on How Not to Actually Die Trying)

#webdev #react #cli #tutorial

Comments 3

4 min read

Go Global or Die Trying (A Guide on How Not to Actually Die Trying)

Nazarii — Thu, 08 May 2025 12:54:16 +0000

So, you're developing a product, and suddenly it turns out that most of the users are not from an English-speaking country.

Not a problem, but you've hard-coded all the text or kept it in an unorganized JSON file.

Now, instead of delegating it to some translator or using some AI to translate it fast, you are going to be implementing every single translation, and most likely, the translation will be out of context, and you will be in an infinite loop of fixing it after getting complaints from confused users.

🏃‍♂️ Don’t want to become an errand boy or girl for the customer support and localization team?

⏰ Here is how to save your future time:

Localization Nightmare

Maybe, even as a user, you have sometimes experienced parts of the UI in a foreign language and found it confusing?

I have had complaints from Chinese users that, apparently, the Chinese version we were providing was not the right Chinese language they had chosen. What was supposed to make the app accessible made it confusing and impossible to use…

The Excel/CSV workflow turns into a nightmare for version control. It may be nice when you just started development, but before you know it, you realize that you don’t know what is even going on now.

Contextless translations and the soul-crushing manual labor of copying strings between files soon will be your new best friend if you don’t optimize it :)

Translators work blindly without visual context, developers waste hours synchronizing code with translation files, and the worst part is discovering missing translations only when users report them. So, what can you do now to avoid ending up in this hell?

At What Point Should You Even Start Localizing?

The ideal time to incorporate localization is during your initial planning of the architecture. Even date formats and UI layouts that weren't designed with language expansion in mind can be a huge problem! Think of those things in advance. Localization is not just translation.

How dates and times are written, in what order the names are written, and whether the text is written left to right or right to left are some basic questions to keep in mind when building your app. Are you ever guilty of not considering any of those?

Excel at code, not at Excel

Escaping Excel might not be easy when you are so used to it. Modern localization management platforms have come to help you fight Excel madness. They centralize where developers, translators, and project managers collaborate, so that everything is up to date together with the code. Instead of thinking about translation as a static file exchange, these platforms treat localization as a process that evolves with your codebase. Examples of such platforms are: Tolgee, Crowin, or Phrase

Key Features That Will Save Your Sanity

Translation context preservation

Editing translations within your app interface is like a jump from using Notepad to VS Code. In-context translation means that translators can see exactly where and how their translations will appear. This way, words would not get lost out of context. Imagine if someone was localizing to English and suddenly your “Shopping Cart” is now called “Trash Can” because it is the same word in another language.

// en.json
{
  "welcome_message": "Welcome to our app!",
  "items_count": "{count} items found" // How is this used? No one knows!
}

When using visual editing that preserves context, translators click directly on UI elements in the actual app and translate with perfect context. No more guessing how long the text can be and what it refers to (especially relevant to languages like German).

Tolgee JS and React: https://tolg.ee/kgt1pp

Automatic Detection of Missing Translations

"We're launching in Spanish tomorrow,”

but nobody noticed that 40% of the new features that we added are actually untranslated...

When utilizing a localization platform, it tracks your translation and automatically flags missing or outdated translations before they become production emergencies. This way you prevent fires before you have to put them out.

The CLI (Command Line Interface) helps manage your project from the command line. Pushing and pulling strings is the most basic way to work with strings using the CLI. It helps to download strings to your system or to upload the strings after changes. It is almost like using Git, so it doesn’t require a lot of getting used to if you are familiar with Git.

Example from Tolgee that has an open-source CLI :

tolgee pull [options]

Example usage:
   tolgee pull --path ./i18n

tolgee push [options]

Example usage:
   tolgee push --force-mode OVERRIDE

Developer-friendly Workflows

To help you integrate everything seamlessly, these platforms are not just a visual playground for translators. They also provide:

Git-like branching for translations alongside code features
CLI tools for extraction and synchronization
Figma and Browser plugins like the ones from Tolgee
IDE plugins that highlight missing translations
Preview environments for testing translations before release

What are the options?

If you are looking for an open-source, developer-friendly option, you can try Tolgee and find it on GitHub: https://tolg.ee/0qmbt7

Popular options:

Tolgee
Crowdin
Lokalise
Phrase

Conclusion

Step one after your MVP should be thinking strategically about how you will operate at scale. Think of the localization of different features, starting with dates and time, ending with text width and size. Integrate translation keys into your code and ensure they are named properly. Try open-source alternatives and features, such as plugins for Chrome and Figma, to simplify work for everyone.