I think that ideally, every project would be setup from scratch in the beginning to use t() tags or something similar to have translation keys so that setting up translations is as easy as swapping out what t() returns (from e.g. a config file or the like).
Of course, we all know that this is very rarely how projects end up getting setup especially in the early stages, and then it's just massive amounts of work to go back and set it up later.
The thing that's the most intriguing to me about what you're describing is automatically setting up translations in the build step where you auto-detect strings to translate. But looking at the site, most of it seems to be focused around the VSCode extension which will just sort of find and replace strings in the source code with t() tags.
Can you talk more about the translations in the build step? Is there a reason you're not talking more about that on the site? (Is it just newer, not very reliable/good, or...)?
The idea that I could just throw something like this into my project, not have t() tags in my source code but still get translations, sounds like magic and I think it would be really neat.
Yeah, we've noticed that companies in the early stage ignore i10n completely and then eventually realize it's going to be a huge lift to retroactively support it
So, for the build time translation-
Yeah, I would say it's not reliable yet =p
But, it's not that far off. It's not magic- the idea is that we inject the t functions at build time so that they don't need to be in your code. The vscode extension is a good visual for this- for many patterns, it correctly notices what does or doesn't need to be translated.
But, the real problem is that if a process like this goes awry (a strange pattern leads to text being erroneously translated/untranslated) then it is next to impossible for someone to debug.
Glad you think this is cool. We think this is absolutely on the horizon, and we hope to be the first to get people using it... but in the meantime, we don't want to be responsible for issues on prod...
This is a great idea. I have even hit this pain point when developing a healthcare app for hospitals that was primarily used in the United States. There are certain communities, even just within California, where it is common to have patients who only understand Spanish, Mandarin, or Japanese.
Any plans to extend this to iOS/Android development in the future? I assume it would already be easy to integrate this into React Native.
Also, is there a way for me to provide explicit additional context to the `t` function for the translation? Essentially a string that is appended to the LLM input for translation. For example, in Japanese there is often a significant difference between formal and informal language, and it is common to add post-positional particles such as や, が, and の to make titles and labels sound more natural. I see you have addressed many other special cases around numbers/dates/etc, so certain flags like formal/informal, regional dialect, etc may be valuable future additions.
Overall looks really nice and I look forward to trying this the next time the need arises.
Right now we actually do have React Native support, it is now in our docs! As for adding manual context, we're planning on adding that, but we don't want people to go overboard with adding additional context where it's not needed. We want to have suggestions for if we need additional context beyond what we get from the tree traversal. Also, in terms of tone/regional dialect, that's something we're adding into the dashboard so that all translations will have that info passed to the LLM to maintain consistency throughout the app!
Maybe it doesn't recognize my language settings but it'd be nice if your website would be in my local language to show off that it works.
Which language? Our site/dashboard supports 15 or so languages, as do our accessory apps/tools. Still working on our docs though, which are only in 2 languages...
It's a huge pet peeve of mine when translation services aren't themselves fully translated, and I see it a surprising amount ahaha
It should switch to the appropriate language based on your browser settings. If you're in Chrome, make sure that in Settings > Languages, your language is at the top of the list.
Maybe there's just no Dutch translation? I just put it at the top. Restarted Chrome but the page is still in English.
I'm gonna be building a web app in the next month or so that's gonna need a ton of translation, but it's gonna be a SvelteKit app. Do you plan on supporting Svelte anytime soon?
Svelte should be supported soon, alongside the other major js frameworks we don't support yet. I hope it's ready in time for what you're building!
Quetzal as a product is inevitable. It will make it even easier to target international markets from day one with a tiny team. Congrats on the launch! You rock! Greetings from section 4D!
I have been using a very similar approach for i18n of my eternally experimental web game https://luduxia.com/reversi/ which has an entertaining build process including this sort of thing. (I come from a game publishing background so have nightmares of when we all sent Excel sheets around motivating these things).
Does your result live update the strings in place if the device locale is changed?
Do you have any method for getting feedback from UI tests? I don’t now, but that is absolutely a feature I was used to previously. We used to OCR off expected areas to ensure things fit etc.
The computer kicked my ass. I had forgotten why I disliked othello...
As for the UI/UX tests, we're looking to integrate with PostHog and work with another company in our batch (PathPilot) which focus on analyzing user experience
Once we work these analytics in, the theory is we can better predict UI issues and resolve them retroactively. A full UI testing suite is something people have asked for, and we aren't there yet, but the tools are here
Yeah, we detect off the browser what locale we should switch into. As for UI tests, we're doing that ad-hoc right now for everybody, but what was your favorite approach to that? I'd love to look into what the best ways people handled that in the past and how we can improve on it
This was for video games (console, pc, mobile) but we had a framework where a video feed went into a host machine and you could get it to ocr read areas off the screen. This was then used to guide user input (i.e. find the right button if it had been moved) but also had checks for if strings exceeded bounding dimensions.
The classic always used to be German overflows, but these days the wrong sort of Chinese and RTL is more of a headache. (I have been ignoring proper RTL for a while).
I have also noticed LLMs get stuck in healthy/unhealthy loops when doing this sort of work. If you can snapshot the state of them when they are doing the right thing it would be very useful. They also build a lot of good per app context which improves the result quality.
Ahh okay, that makes sense. There are two possible approaches we could take, one would be creating some kind of E2E testing that would detect overflows/things like that, or integrating into existing tests, but that would probably require a lot of work for people. The other thing is, like Burj (Brendan) mentioned, integrating with PostHog session replays and the like and detecting overflows from there. Probably leaning towards the latter just for ease of use.
Very nice. Is vue supported?
Vue tooling should be ready soon, but it's not supported yet. All major js frameworks are high up on the roadmap
for nextjs apps, localization with next-i18next was a breeze.
Yup, we use a very similar library on the backend, we just layer a few things on top of it, like our VSCode extension that scans through the app and auto-wraps user-facing strings for translation, build-time translation, automatic context, etc.
If you've got a big codebase, the VSCode extension can be super helpful for setting up.
Is your product essentially the VSCode extension? I’ll check it out
Congrats on launching. This looks promising
Just in time. Gonna try it right now. Will share feedback.