Max Prilutskiy - AUDIO EDIT
===

Noel: [00:00:00] Hello and welcome to Pod Rocket, a web development podcast brought to you by Log Rocket. I'm Noel, and today we have Max Prosky, co-founder and CEO of lingo.dev here to talk about the lingo.dev compiler. How's it going, max?

Max: Hi everyone. Thanks for having me.

Noel: ~Cool. Cool, cool, cool. Um, I guess just to kind of, ~I feel like this is ~a, ~a fairly new,~ uh, kind of ~tool that devs might not know about.

Can you just give us the quick overview of,~ uh,~ what the lingo dev compiler is?

Max: ~Uh, ~yeah, sure. Lingo Dev Compiler is our new open source, free and open source,~ uh,~ package. It's,~ uh,~ pretty much a library middleware for built tools such as,~ uh,~ ve or,~ uh,~ it can also be used with njs and three React roter. ~Uh, ~formerly remix, and what it does is that it makes your app multilingual, basically, it implements it nm without having.

~Um, to,~ to extract strings from the code base, basically without having to rewrite the entire application to refactor the entire application. ~Um, ~and you don't have to change the components, wrap them in translate text or in t functions. It just does that [00:01:00] automatically. You just enable it and it magically works and it does it at build time.

Noel: ~Gotcha. I guess just to, just to kind of frame this a little bit, are you, like, is,~ does lingo, do Dev specifically target React? You mentioned like veon, like the other build layers here ~are, ~are we still only ~like ~talking about React projects for the most part or is there ~other, ~other support as well?

Max: With lingo dev compiler, it's,~ uh,~ react projects and specific,~ uh,~ types of setup. Namely, it's wheat reactor reactor, and next j. Pro, but Lingo dev main product is a localization engine and API that can be used not only with web technologies, but also like with markdown files even, or mobile apps,~ uh,~ flatter apps, iOS apps and things like that.

But lingo dev compiler is specifically for,~ uh,~ react apps and those particular setups at the moment. That's the starting point.

Noel: ~Yeah. No, that makes sense. That makes sense. Is there like. I guess can, ~can you ~kind of, um, ~explain a little bit more about ~like ~what the compiler is doing specifically that's special compared to just like the larger lingo.dev offering and how that kind of interacts with the React project structure?

Max: Sure. ~Uh, ~it's a, [00:02:00] yeah, for us ~it's a, ~it's a very exciting thing that we always wanted to build. And we actually tried building Ling dev compiler a year ago, but we failed for a couple of reasons and then we decided to give it,~ uh,~ another try. ~And we, uh,~ and we succeeded from this second attempt, basically, so that you understand,~ uh,~ what it does and how it compares to other it n Solutions is basically.

~Um, ~typically you would,~ uh,~ use an it n library such as reactin tool. ~Uh, ~or it next, or ~like, there's, ~there's many of them and they work in a very similar way. You have to install the library. You have to extract the,~ uh,~ strings that you are showing to the user on the screen. You extract them into JSO files, draft scripts, sometimes to do that,~ uh,~ extraction in semi-automated way, but at the end of the day, you do the extraction step and you end up having JSON file.

In English and then you translate that JSON file. And in the code,~ uh,~ in order to mark some things as translatable,~ uh,~ like elements, you wrap them in special [00:03:00] functions

Noel: ~Mm-hmm.~

Max: and you reference the actual messages that are in your JS file by key. ~Right. ~And then you either use formatted message component or uh, t function, or sometimes you wrap,~ uh,~ pieces of text in your app and then you run a script to do that automatic extraction.

~But, ~but essentially ~it's about extracting, uh,~ it's about refactoring your code base and extracting translatable strings into adjacent file that then you pass through. ~Uh. ~Like whatever translation process you have. So that's the traditional, and now I would even say legacy way of doing it now,~ um,~ lingo dev compiler is approaching the same problem, but in a slightly different way that didn't make sense,~ uh,~ before ai, and I will explain that in a second.

~Uh, ~but now it makes a lot of sense and,~ uh,~ here's how it works. ~It's a, ~it's a compiler, meaning it's a build,~ um,~ built, let's say stack middleware. It's a plugin, it's a web pack or,~ uh, we, ~we support ~like different, uh, different, uh,~ different build tools. So it's a plugin essentially that works at build time, both in dev mode and in production builds.

[00:04:00] And it analyzes the code base identifies pieces,~ uh,~ in react code that need to be translated. And then. ~Right. ~During the build time, it calls translation or localization ai, like API endpoints,~ like, uh, ~we support several LMS for that, and it creates those translations and stores them in the project. And that means that whenever, like after that, when the app ~is, uh, is, uh,~ is shown to the user when it's run in dev mode or it's published in production mode, you see just English text first, but then you switch the language.

You see the,~ uh,~ let's say Spanish version after that, but you didn't write any Spanish text. It happened during bill time automatically. By the way, it's also customizable, but it doesn't have to be, ~you know, uh, ~like you, you don't have to, uh, like write the Spanish. Yeah, it's, yeah. Yeah. It's,~ uh,~ yeah, but it's customizable,~ uh,~ at the end of the day.

~So, uh, ~TLDR is~ is that it eliminates, uh, all the friction that typically exists. It ~is designed to eliminate all the friction that typically exists,~ um, when, ~when developers do it n internationalization and,~ uh,~ maybe a lingo. Dev compiler [00:05:00] is the first,~ um,~ tool that does it in such a way, like at build time. But honestly, we feel ~it's such an.~

It's such an obvious thing to some extent that all other,~ uh,~ popular React libraries for Itin n like reacting to or Itin n next,~ uh,~ they will at some point implement that. ~We, ~we feel ~that's, uh, that's, ~that's a natural next step for all Itin n ~uh, ~react libraries. And also there is also even a chance we think,~ uh,~ that next Gs or remix React rotor now ~will make.~

~We'll, we'll, ~we'll use the same concept, the same idea inside the frameworks themselves. 'cause it's like it eliminates so much friction from~ developer process~ development process.

Noel: Yeah. ~I've got, ~I've got a couple interesting threads I wanna pull there, but I'm gonna, I'm gonna circle back to them. I want to get a little bit more, ~kind of ~into the weeds here slightly,~ um,~ on ~like ~what is actually spit out, ~like when,~ once this kind of build time middleware. Compiler, like when it runs.

~So, ~like for me, when I'm thinking about,~ um,~ internationalization, one of the tricky things is like the way in which,~ uh, like~ reactive text is composed can necessarily be different, ~like~ between different languages. ~Like, you know, ~the [00:06:00] count is x,~ like,~ and then that being reactive ~may be like~ that X may be in a different place, ~in a different, like when, ~when the text is translated.

~And, um, you know, like I'm. When, when that, ~when that reactivity needs to be added, like the awareness of that context, I feel was something that like ~when you're,~ when you were going through this internationalization process, historically, it was like that's why you got, there was this like kind of format syntax, right?

That was like contextual and you could like. Inject data into the output strings. Is that process still kind of the same? ~Like is that, ~is that still happening here or is there some other kind of magic that's making these simple strings into like function calls that are then usable? So like data can be injected to build these new strings for other languages?

Max: Yeah, that's a great question. And in fact,~ you're,~ you're saying that deposition can be different in different languages. It's,~ uh,~ always the case with Arabic, for example, or Japanese as compared to English. ~Right. ~But also ~what's, uh,~ what's funny is that,~ uh,~ sometimes the number of parameters is different and the order of parameters is different.

So in one language, you would have,~ uh, like three, um. ~Three variables. ~Let's say where you like insert, like, uh, like we, uh,~ let's say it's a message like you [00:07:00] have like count notifications, right? So these types of things. And in another language maybe it's gonna be like two parameters instead of three and in different order.

~So, uh, we, uh,~ we support that. However, we don. Implement our own standard. So we are following industry standards here and we are building on top of them. So for example,~ uh,~ there are things like message format two. ~So, uh, ~yeah, we are trying to reuse as much existing work as possible. And,~ um,~ yeah, so ~it, ~it does work.

It does work in the same way. ~Uh, ~it does support these dynamic variables inside,~ uh,~ G six stacks. ~So.~

Noel: Gotcha. ~Is like, is that, ~is that something the developer has to care about or ~is this, ~is this kind of build time layer? Is it like figuring all that out and ~kinda like ~doing it automatically?

Max: that's,~ uh,~ that's one of the most challenging part, to be honest, of this processing that compiler does. So we wanted this to be automatic. And it and the compiler, does that automatically drive,~ uh,~ several limitations, known limitations in terms of how compiler works and what it expects from the code [00:08:00] base?

And,~ uh,~ number one ~rule, ~rule of thumb is that ~if you want, ~if you're showing a piece of text ~to, ~to the user and you want that piece of text to be,~ uh,~ multilingual, then it should be inside geo six.

Noel: ~Mm~

Max: For example, ~if it's a,~ if it's a variable, let's say constant title equals whatever hell world, and it's, and this hell world is a string literal, this will not be localized at the moment.

~Uh, ~to make it localizable, it's very easy actually. You just wrap it in at least. React fragments, ~you know, ~like with empty braces ~on both, ~on both ends and that's it. Span obviously also work as well. ~Um, ~so that's,~ uh,~ an own limitation slash ~uh, ~convention that lingo dev compiler is using. The main reason we are saying it's a convention rather than limitation,~ uh,~ is because.

It's,~ uh,~ nearly impossible. So ~we want the compiler,~ we want the compiler to be able to process huge code bases up to ~like ~10 million,~ uh,~ lines of code, right? And to make that work, we needed to work predictably and deterministically. And the issue with string [00:09:00] literals is that sometimes you would have like cons, let's say cons,~ uh,~ like type equals whatever, and that whatever.

It's not supposed to mean anything to the user, it's just some system value that you are using internally, but ~for, you know, ~in terms of like how abstract Syntax threes work and how React code and JavaScript code is composed. It's impossible ~to, ~to tell the difference between ~like ~something that user will eventually want,~ uh,~ to have, ~you know, ~multilingual on the screen or not.

~So, uh, ~there is a convention that lingo dev compiler is following, and it's that you have to wrap translatable text in J six. That's it.

Noel: Yeah. ~Is, ~is that like a known convention? ~Do you,~ did you guys ~kind of pull that, ~pull that pattern from somewhere? Or ~is that, is that just kind of the,~ did that seem like the obvious place to ~kind of ~delineate?

Max: No,~ it,~ it was just,~ it,~ it came naturally, to be honest. We were experimenting with a lot of things and this,~ um,~ this concept, it just came naturally. ~I am, ~I don't know whether any other library is using that. ~Uh, ~I don't think so. ~Uh, ~because~ it's such a unique, uh, like~ it's such a specific thing,~ uh,~ to compiler.

~Uh, ~like type of approach. So ~I don't, ~I don't think such things is somewhere else.

Noel: ~Yeah. Yeah. I mean, it, it makes, ~[00:10:00] it makes sense as an abstraction. 'cause like you'd ~kind of ~be opening up ~a whole, ~a whole can of worms. Otherwise, if it was like ~any, ~any possible, ~like~ variable would need to be translated because then it's like, well maybe this is like a username or something in here. ~Like there's all, ~there's all kinds of funky, funky,

Max: exactly. And also,~ uh, you know, ~system design and react code quality wise, I think it makes a lot of sense as well because,~ uh,~ react has always been this view layer ~of, uh, of, you know, of your, uh, ~of your application and. ~You, ~you write G six and like HTML before that in order to display something to the user, to show something to the user, to let user interact with something.

Right? ~So, and that's, uh,~ and that's why HTML exists in the first place. And then G six as like super set. ~Kind of, uh, ~on top of HTML that adds this like JavaScript layer on top of HTML, right? So it's all about,~ uh, like~ interactivity and communicating,~ um,~ information to the user. So we feel it's the natural concept to keep in mind that if you want something to be translated,~ uh,~ it should be in,~ uh,~ G six.

Noel: ~Yeah. Does that, I guess, yeah, like I guess~ I would imagine ~that ~that also ~kind of. ~Makes it simpler to do this kind [00:11:00] of building of the translation layer,~ uh,~ with ~like awareness of like all ~the only awareness needed being the a ST itself. Can you talk a little bit more about like why the abstract syntax tree is ~like~ a good kind of tool to help with this and ~if, if, ~if there's any kind of,~ um,~ information you guys can glean there to help determine how things should be translated, like what the chunks should be.

Max: Yeah, it's a very exciting,~ uh,~ part. ~Um, ~and like the core part of how lingo dev compiler works and, ~uh. ~Essentially abstract syntax trees. They help us treat,~ uh,~ code as a very complex data structure. So ~that's, ~that's why they're so powerful in this,~ uh,~ in this context. And that's why compiler is u is using them under the hood.

~And we are not, by the way, we,~ we are using,~ uh,~ the industry standard tools under the hood, such as Babel ~for, ~for instance, to,~ uh,~ do this abstract syntex three manipulations,~ uh,~ inside the compiler. And ~it works. It works. Uh, ~it works elegantly. ~Uh, for those, uh,~ for those who have contributed to the open source,~ uh,~ report that we have,~ uh,~ yeah.

You guys [00:12:00] know ~that ~that elegance, you saw that firsthand, but,~ uh,~ yeah, it's,~ uh,~ it's such a powerful mechanism to use inside the compiler because it can help infer. ~Uh, the, like,~ the location of the elements, the meaning of the elements. Also, it helps,~ uh,~ for example, ~there are, um,~ there is this thing in react,~ uh,~ code basis,~ uh,~ that you can supply like arbitrary attributes to G six elements, like data dash whatever.

And ~the, you know, ~your id, your ES link, whatever they want, complain about it. So for example, we are supporting data lingo, skip. Attribute, if you want to exclude something from translation or data lingo, override, and then local code, if you want to provide like specific versions for something ~or like, ~or like context also.

So it helps with a lot of things and ~uh, it's just. I think it's, uh, it's an, ~it's a very elegant piece of,~ uh,~ technology,~ uh,~ both Babel and abstract syntax threes and,~ uh,~ it's just the ~perfect, uh,~ perfect,~ uh,~ solution to be in the core of the compiler. Speaking of which, and,~ uh,~ I think,~ uh,~ I mentioned already that lingo, the dev compiler didn't make much [00:13:00] sense,~ uh,~ before LLMs.

And,~ uh,~ here's why. ~Um, ~technically such library, such open source compiler could exist. Technically, it could have been built,~ uh,~ like 10 years ago, 20 years ago, because abstract syntax three,~ um,~ computer science wise, it's not a brand new concept.

Noel: pretty. It hasn't really changed much in form yet. ~Mm-hmm.~

Max: But, ~uh. ~If you think about it. Alright,~ let's, let's, um,~ let's imagine somebody,~ uh,~ built that compiler technology like 10 years ago, 20 years ago, and.

The result ~of, uh,~ of the compiler working ~is, ~is a, is like a metadata file, like a dictionary file that contains like the metadata and some pieces of text that need to be translated. And for humans who would translate that thing, it would be even harder to process and to work with that format. And then, all right, ~you do, uh,~ you don't have to extract strings.

~Uh, ~it's done automatically, but then you still have the file. That you need to send to the person to translate and then to wait for the file to come back, right? ~It won't, it wouldn't solve much. Uh, like~ it wouldn't solve much. It wouldn't solve many problems. But now since. [00:14:00] AI is getting better and better with translations and it can be supplied with all this contextual information, both macro,~ uh,~ context meaning like about the product and the industry,~ uh,~ and micro context about the position of that element.

~Uh, ~within the context of the page, let's say we can supply all that information to the LLM too. ~To, ~to create perfect translation in just a couple of seconds. And that means that the only blocker now is the developer experience and this extraction and this ongoing maintenance tool that,~ uh,~ every single team,~ uh,~ usually has,~ uh,~ after implementing it n ~So, uh, ~these two things in combination,~ they, they, ~they're just like a perfect match,~ uh,~ to solve,~ uh,~ localization in,~ uh,~ web applications.

Noel: ~Yeah. ~You talked a little bit about ~kind of ~this,~ um,~ micro context, I think was the term you used, but it's like context of the app itself and the shape and like ~where these, ~where these strings are and how ~like ~handing that off to a human could be difficult. I'm thinking back to the kind of ~old, ~old version of this where you have like giant, ~you know, ~localization files and it's ~like, ~here's all the strings.

Can somebody like translate this into [00:15:00] Spanish now ~or, ~or whatever. ~Um, what like. I guess, ~what do those kind of artifacts look like? ~Like, like ~what do you actually end up now with ~when, ~when you have a build, ~like ~let's say you wanna just ~kind of ~go in and ~like ~see what happened or debug something that was weird.

~Like, ~is that really possible? Or ~like, like what, ~what is the actual code that ends up running and what data is stored to help it? Like do the localization process?

Max: ~Yeah, for sure. So, uh, there, there,~ there are a couple of questions that you asked here. So first of all, what are the artifacts of,~ uh,~ linko dev compiler? So the artifacts are, ~um. ~Basically a dictionary file and metadata file. And,~ uh,~ at the end of the day, those are the files that contain the text ~that will be used, um, that, that,~ that is being used during ~like the rendering pro, uh,~ the rendering phase, right?

~Um, ~technically,~ uh,~ we can hide those files. Not expose them to the developer and the very early versions of Link to Dev compiler,~ uh,~ were doing exactly that. But then we realized maybe it's,~ uh,~ too magical in some sense. It's like you are enabling something. You don't see any artifacts. Somehow the app is translated and you have no idea how it works.

And ~we, ~we [00:16:00] showed it to the users and they were like, this is complete magic, but ~like, ~I have zero visibility. I want to understand what's going on. ~So, um, there are, uh, we, we do now~ we do expose metadata and dictionary files. Now,~ um,~ developers are not supposed to touch them very often. But it's definitely possible whatever override is being made in the dictionary file, let's say it remains there, even if you rerun the compiler.

~So it basically.~

Noel: ~interesting.~

Max: So basically ~it's, ~it's like a cache. It's like persistent cache of the translations ~that exist on, like exist inside, uh,~ that exists inside the project itself. And it's very powerful because,~ uh,~ both metadata file and dictionary file, they contain this meta information, the translations themselves.

And you can easily ~like, ~inspect that file and ~like ~play with it if you want. ~But, uh, yeah, for the like. It, ~it's not supposed to be worked with. ~Uh, you know, ~very often,~ um, it, ~it is being managed by lingo, dev compiler.

Noel: ~Gotcha.~ you mentioned it's ~kind of, ~it's ~kind of ~this like cache. ~What, what is, ~what is keying on it? ~Like ~what would cause an override to be made to something that had actually been tweaked in one of these ~like ~artifact files?

Max: ~Yeah. Uh, great question. So, um, ~usually when [00:17:00] you,~ uh,~ change, ~um. ~Like the location of the element is being retranslated. ~Uh, ~and then if you change, obviously the content, it's being retranslated in terms of overrides that I just mentioned, that developers can always do,~ um,~ if they are done manually,~ uh,~ through the dictionary file, not through ~uh, ~data lingo override attribute, but like manually in the file, they will remain there and they will not be overwritten unless.

They change the,~ uh,~ source version. So source version is ~like the, uh,~ the thing that we look at, and if source version changes, it means that it makes sense to retranslate other versions of that,~ uh,~ let's say paragraph as well. ~So, ~yeah.

Noel: ~Cool. I, I was gonna, I was gonna, this is kind of another, another question along, along those lines, and I'm, I, I was curious, like ~you talked about the accuracy and ~knowing, like ~knowing when these translations are right. ~Like, ~have you guys just found anecdotally that like we're ~kind of ~at the point where these are usually good enough to just send?

Or ~is there any,~ are there any particular areas that ~are still like. It's like, ~it's ~kind of ~tricky ~in, ~in like certain corners or ~how, how, how, ~how's the efficacy been so far

Max: ~So, uh, ~what do you mean exactly the quality of the translations or the,~ uh,~ compiler developer experience?

Noel: more the quality of [00:18:00] the translations? I think ~I'm, I'm, ~I'm more sold on the developer experience. ~My,~ my follow up question was going to be like. ~There.~ Are there ~ever ~ever any cases where you like alert to the developer ~or like the model, like do, ~do you give the capacity to the model to kinda ~like ~throw its hands up and be like, I don't know, ~have like, ~I need a human to look at this, or is that not something you guys have encountered?

Max: ~So, uh, ~the AI quality part, so ~just, ~just to make it clear, lingo dev compiler is completely open source and free, and you can use ~your, like~ whatever model you want,~ uh,~ with it,~ uh,~ for translations, like open AI, for example, and like on tropic whatever you want. ~Um, uh, ~however, you can also use it with,~ uh,~ lingo dev.

Engine,~ uh,~ since recently as well. ~Uh, ~and,~ uh,~ it's very important to understand the difference because link to Dev is our commercial product, which is localization engine and API, ~that pro~ that is designed to produce,~ uh,~ perfect translations that match the, ~you know, ~the product context and the brand voice and all the things that you want to have in perfect translations.

~But lingo, dev compiler is for, ~for lingo dev compiler, translation quality is out of scope. There are ways to,~ uh,~ configure,~ uh,~ as I said, the model that you want to use. If you use,~ uh,~ for example, lingo dev [00:19:00] engine. With the compiler, then obviously that problem is solved because it manages all the contextual information.

All these like sensitive brand voice settings and things like that. But if you're using OpenAI,~ um,~ key,~ uh,~ like raw,~ uh,~ let's say LLM access or Tropic Key, you can. Just prompt engineer the whole thing. There is a way to provide custom, prompt,~ uh,~ provide,~ uh,~ different models. ~Uh, ~for example, I wanna use this model for Arabic, but that model for French, let's say, you can always do that,~ uh,~ if you wanna manage that,~ uh,~ manually.

And ~like, ~system prompt can be configured to, ~you know, to, ~to follow certain, like brand voice and style. ~So, uh, ~that is definitely possible. But,~ uh,~ quality wise,~ um,~ for compiler. It's up to the user,~ uh,~ honestly, so it's out of scope unless they use single dev engine. Of course, in that case, we take care ~of, ~of that ourselves.

Noel: ~Yeah. Yeah. Again, I think, I think that, yeah, that all makes sense to me. I'm, I'm more curious about, like, I get it,~ it feels like it would be in the purview of the engine to have ~like, you know, some, ~some kind of like confidence or something reflected back to the developer. Like,~ when,~ when this process is running, ~is there, ~is there any like mechanism ~kind of ~for feedback as this happens?

Like,~ Like, ~oh, I hit something. I [00:20:00] made an effort at translation, but ~like, ~I'm not super sure on this or ~like, I don't have enough,~ I don't understand what this word means. ~Like, is there any, ~is there ~any ~any of that in here at all or is it kind of just like, no, that's up to the model. ~Like~ you like kind of have to watch the output ~to see, ~to see what it does?

I.

Max: Usually it's up to,~ uh,~ to the model. And obviously with tools like Cursor or Cloud code,~ uh, you can just, like, if you're, if you're, ~if you're, ~you know, ~feeling curious, you can just ask, Hey,~ like, is, ~is this actually

Noel: Is good.

Max: Yeah, it's like as easy as that. And the answer will be that you'll be surprised with,~ uh,~ the, actually the quality most of the times.

And with link on dev engine, for example, we do more sophisticated checks under the hood when we,~ uh,~ manage translation quality because there are certain industry standards scores,~ uh,~ the teams, localization teams usually use to,~ um, to, ~to understand how good the translations are. So we, at the very least, we monitor them.

And then on top of that. ~Uh, ~we have our own benchmarking system,~ uh,~ that uses LLM as a judge to basically make sure that whatever response our API produces, ~it's, uh, it's, ~it's best for that product. So ~we, ~we do a lot of,~ uh, like, uh, ~localization, [00:21:00] QA work on our side under the hood.

Noel: ~Nice. Nice. ~I wanted to ask a little bit about ~like ~if there are any potential other kind of gotchas in here. ~If like kind of, if,~ if using,~ if using, um,~ the compiler in general,~ like, is, ~is there any~ any ~anything? Right now, that's ~kind of ~our potential pitfalls. ~Does, ~does it work with everything like server components and client components and ~like, is that, ~is that all seamless or ~is there, ~is there anything worth considering?

Max: Yeah,~ uh,~ that's a fantastic question. So there are,~ uh,~ three,~ uh,~ common ways to use,~ uh,~ lingo, dev compiler, it's vet, it's ~uh, uh, ~react rotor together with,~ uh,~ VV and also next GS up rotor. ~So, um. ~We currently do not support pages, rotr only. Next GSR Rotr, we do support both client and server components. ~And we even have our, um,~ we even have a directive like,~ it, it, ~it's called Use it n So it's pretty much like use server or use client, but it's for internationalization.

And the reason is that for very large projects, you sometimes want to onboard them file by file. To ~like ~monitor for edge cases, those string literals that might exist, right? So you wanna onboard the project file by file [00:22:00] and you can just flip the flag in the configuration of the compiler to only work with files that have,~ uh,~ use it n directive, right?

So we have that. So we do support, as I said, next Js up route, both client and server components,~ uh,~ uh, wi and react rot together with ve ~uh, ~in terms of known limitations, as I mentioned, it's string s so whatever is inside GS six is translated, was whatever is outside is not translated. And in terms of the experience and go, so the situation is like this.

~So, uh. ~Usually users, ~they, uh,~ they find themselves in one of these two buckets. The first bucket is you follow the tutorial from the website, from the official docs, and it just works. From the first try, like ~you just, ~you just follow the instruction word to word and it just works. Your app is magically in all the languages you want immediately in just a matter of,~ uh,~ seconds or,~ uh,~ minutes depending on the size of the app.

And then there is second bucket of,~ um,~ of the developers who follow the instructions. Sometimes not very carefully, just speed running [00:23:00] through,~ uh, through, ~through the dogs without paying attention. And then,~ uh,~ something doesn't work. ~Um, ~and when we start looking to those cases, usually,~ uh,~ it's, that's the setup in the v config, let's say, is very custom, right?

~And when you,~ let's say ~it's, uh,~ it's your project that you use at work, ~you don't, ~you don't probably modify v config very much. For you, it feels like you are working with a typical React app, but actually your app is not very typical if you look into your vi config. ~Right. ~And our job right now. ~And we in, ~and we invest a lot of efforts into that is to make sure that whatever custom setup developer is using in their React project is supported by lingo to def compiler.

I wouldn't say it's an easy task, but ~uh, uh, it's. ~It's for some weird reason. It's a task that we are extremely excited about ~and we, uh,~ and we always looking forward to supporting as many such like weird and edge cases as possible. ~So, uh, ~yeah, that's what we are doing,~ uh,~ these days. Yeah.

Noel: ~Nice. Nice. Does, uh,~ does everything work pretty well with like static site generation mode, or~ is there, do you need a,~ do you need ~kind of ~like ~a, ~a runtime piece to do the actual like [00:24:00] localization lookup?~ I.~

Max: ~Uh, ~yeah, we need a runtime piece. ~Um, ~mainly due to some limitations that, for example, speaking of react server components in next GS operator, right? Unfortunately, there are two ways how you can access, let's say, ~um. ~Execution context or like request,~ uh,~ information from react server components. ~And, ~and it's either through headers function that next provides or through I think cookies,~ uh,~ function, which is like similar thing, right?

'cause cookies are in headers and that's it. So in order to identify the information, like about the currently selected locale, we need access to runtime. ~Uh, ~we have ~couple of, um, uh, ~couple of crazy ideas. ~Uh. ~What to include in the next,~ uh,~ version of the compiler. But ~yeah, that's, uh,~ yeah, that's in progress.

Noel: ~That.~ That was my next question. What's ~kind of ~next on the roadmap? ~What are you guys, ~what are you guys targeting?

Max: ~Uh, ~yeah,~ we,~ we wanna support next year's,~ uh,~ pagers, router, and,~ uh,~ static builds for,~ uh,~ next year's, ~you know, ~pre renders like,~ uh,~ SSG basically. So that's what's on the roadmap. And,~ uh,~ actually that's not even the most important part. The most important part is that we wanna support as many custom [00:25:00] setups in VI and next GS as possible.

And,~ uh,~ that's like number one priority ~usually. Um, you know, working, I mean, ~it's, as I said, it's ~uh, ~open source and free and we welcome contributions and,~ uh,~ so far we ~received, uh. ~Received some like ~very, ~very helpful contributions from the community supporting like,~ uh,~ several edge cases. ~So, uh, ~yeah. And it's just growing, so it's, yeah, it's,~ uh,~ yeah, it's amazing.

Noel: Cool. Have there been any particular kind of ~standout, ~standout cases that you can think of? Of like the community having some weird edge case and like ~kind of ~adding support for it themselves? Or even just use cases where someone was able,~ um,~ to use the compiler and it like, ~you know, really, ~really powered them up.

Max: ~Uh, ~yeah, there were a couple actually. ~Um, ~some folks are, ~you know, ~using Google models. They were using Google models and we were like,~ well, uh, ~most of developers, they either use charge G-P-T-A-P-I like,~ uh, you know, ~open ai, API or sometimes tropic API. And so we added a support for those, and then somebody was like.

~Uh, ~yeah. Can I add Google? And then they just went ahead and shipped the Google,~ uh,~ like Google,~ uh,~ vertex, ~you know, uh, ~platform support. And then some of,~ uh,~ somebody from the community [00:26:00] said, oh, we already are customers of lingo to dev,~ uh, like, uh, ~API and the engine. Can we somehow use that? And we were like,~ uh,~ yes, sure, let's add that.

So we obviously wanted to add support for that, but it wasn't. The top priority because we were focusing on developer experience and somebody from the community who was also the customer, they were like, yeah,~ let's,~ let's do it. ~Let's, uh,~ let's have everything under the same umbrella. And yeah, things like that.

~Uh, ~usually the contributions are super helpful and sometimes there were edge cases with ~like, uh, ~imports and types,~ uh,~ related to how abstract syntax threes work and one of the open source contributors just. ~Uh, ~saw the edge case and they just went ahead and shipped,~ uh,~ shipped the solution. ~So, uh, ~yeah,~ it's, it's pretty, ~it's pretty cool.

Noel: Nice. Nice. That's awesome. ~Um, well, yeah, let's, uh, let's do,~ I'm gonna do some quick lightning round questions here. These are all like, gonna be a little,~ uh,~ one or two sentence. Some of 'em are even one word questions. ~Um, ~and then ~we can, uh,~ we'll wrap up from there. ~Um, so what was, what is, ~what is one word you'd use to describe lingo.dev compiler? It takes a long time to write ~a short, ~a short letter, doesn't it? Yeah.

Max: [00:27:00] 1 word,~ uh,~ or one phrase. Okay. One word. ~Uh, ~it's,~ um,~ it's a relief.

Noel: Ah, nice. I like it. Good one. ~Yeah, yeah, yeah, ~yeah, for sure. ~I mean, yeah, I feel like international, sorry, I know. I'm just gonna go on a tangent here.~ I feel like internationalization is ~like, ~everyone wants to do it and they know they should, and it's just ~like. ~You spend all your energy like building your core app logic, and then you're like,~ uh,~ internationalization.

~Like, yeah, like, it's like it, it's for sure. Like, ~you wanna do it, ~you know, ~you should. It's like in the same vein as like accessibility and stuff. It's ~like, ~no, I need to do this. But ~you, ~you pour so much of your heart and soul into functionality and then you're like, okay, I've gotta dig a little bit more here.

~Like, ~any tool to make that easier and do it well is ~like, so it's so, uh, ~empowering. ~Um.~

Max: ~You know, ~and to add on top of that,~ I,~ I worked at a,~ uh,~ at a high growth startup,~ uh,~ as engineering manager some years ago. ~And we always, uh,~ I was like planning the work for my team and localization was always like one story point. It's like the minimal,~ uh,~ work that you can do is ~like, ~add, like localization to one of the components.

But,~ uh,~ but actually that one story point, and it's like the minimal, ~like. Uh, ~effort needed,~ uh,~ was blocking the entire project because we were waiting for,~ uh,~ for a translator to translate our like back button or like [00:28:00] more sophisticated button,~ but,~ but still, it's like very easy technically, but you just somehow get blocked and that's why the words to describe od dev compiler is relief.

Noel: ~Yeah, for sure. Okay. Okay. Yeah. Back to I, back to my next, my next short, short form question here.~ What do you think the biggest misconception is about internationalization?

Max: I think the biggest misconception is that,~ um,~ AI does poor job ~translating, um,~ translating user interfaces. I think it's the biggest misconception and I think,~ um, I. Like developers from older generations are, you know, including like my generation, I would say I, I'm 29, so, uh, so~ some people think that it does poor job, but actually if you pick the right model, if you configure, if you spend.

Sometime, ~you know, ~fair amount of time,~ uh,~ on prompt engineering, you can achieve just phenomenal results. ~Uh, ~translating user interface, localizing user interfaces. ~Uh, ~of course we save time with lingo, dev engine that does that,~ uh,~ under the hood, like all this optimization and quality. ~Uh, ~but even without that, if you dedicate time, you can.

Use AI models and produce phenomenal results for translations that will match brand voice, the tone match dimensions on the screen, which [00:29:00] we do ~like, ~for example,~ uh,~ in lingo engine as well. So yeah, I think,~ uh,~ that's the biggest misconception about it. Nine right now.

Noel: ~Yeah. ~Do you have a particular feature,~ um,~ of the lingo, dev compiler that you're proud of, or you just think is cool?

Max: Oh, for of the compiler. Yes, absolutely. ~So, um, ~one of the things that we are excited about the most is that,~ um,~ it works with hot module replacement as well.

Noel: Oh, neat.

Max: So it works in,~ uh,~ it's like it's a compiler plugin, right? And it works ~at dev, uh, like~ in dev mode as well. But what also is crazy is that you have just English text ~in your, ~in your React component, right?

And then you change a piece of text and you click save. And if you switch to the browser. You will see that piece of text updated in all other languages automatically, immediately in just a couple of seconds. And first of all, ~this is, uh,~ this is something ~that we are like that, ~that we are extremely proud of, that we were able to achieve ~this, ~this developer experience, but also it wouldn't be possible without, Model,~ uh,~ hosting providers [00:30:00] like grog, for example,~ who,~ who give you these fast inference,~ uh,~ like API for fast inference and,~ uh,~ when it's used with,~ uh, you know, ~lingo dev compiler in hot module replacement mode. It's just crazy. ~It's just, ~it's just magical. You update something that is in English and you see it updated in Spanish and it's being done by ai, not by some browser built in Google translate by like high quality AI model.

And it happens so fast. So all these combinations of features all together is just,~ uh,~ is just insane. ~So, uh, ~and it's also free and open source so you can ~like ~check it out to see how it works. ~So, um, ~yeah, that's something that we are like, proud of.

Noel: ~Nice. Nice.~ Maybe you just answered this next question then, but what is, what is one thing you'd tell developers stuck using manual like localization, internationalization, workflows currently?

Max: ~Uh, ~yeah. ~Uh, you know, ~there are actually ~two, uh,~ two things that,~ uh,~ typically the ~dev ~dev teams eventually, but developers in the first place,~ um, uh, ~is stuck with the most, is the first one is that, first of all, you need to do the extract. ~Right. ~You have to extract all the, extract, all the [00:31:00] strings into js O files.

The are tools that will help you extract those things. ~Like, ~for example, some frameworks have CLIs that let you extract those things and ~like replace, uh,~ do some code gen,~ uh, to, ~to replace like ~the, ~the text with the components. But also nowadays you can do it very easily with cursor or CLO coat. You just tell it, uh.

Particular prompt to, to ~like ~go through your files and implement it n and extract the strings into Ian J file. And it does that and it does it perfectly. It creates the names for the keys and stuff like that, right? So this is typically the first problem that some libraries,~ um,~ solve and cursor can help with, right?

But the second problem is that after you do that extraction,~ uh,~ you end up having a refactored code base that have these T functions translate components like formatted message components. And if your project isn't being updated often, then it's not a problem. But if it's being actively developed, then every time you have to ~like ~rearrange things inside your component or ~like ~update [00:32:00] the text of the component, you would first.

Search for that thing that you have on your screen. You will find it in your translation file. You will check ~what, ~what is the ID of the key, and you will search for that Id to understand where that text is inside your app. This is crazy when it happens at scale in larger projects, and it's just this constant maintenance stall the teams have to pay after they implemented,~ uh,~ uh, itt n and with lingo, the dev compiler, it just doesn't happen.

~So, uh, ~yeah.

Noel: Yeah. Nice. Cool, cool. ~I think feel like that's as, uh,~ I feel like that is as good a call to action. As any,~ um,~ is there anything else you wanted to touch on quick Max, or do you think we've ~uh, ~we've here.

Max: ~Yeah, I think, uh, yeah,~ I think,~ uh,~ that's it. ~Uh, if you are, uh,~ if you are excited about lingo, dev compiler and the approach that we are taking, go,~ uh,~ check it out. ~Uh, ~go check out our repo, give it a star. Join our,~ uh,~ discord, and,~ uh,~ give it a try. If you have any feedback or would like to contribute, just ping me on Discord.

I'm online. Almost 24 7,~ uh,~ shipping something always. ~So, ~yeah. ~Uh, ~yeah.

Noel: Cool. Thank you for coming on and chatting with [00:33:00] me and,~ uh,~ talking,~ uh,~ internationalization a bit. I

Max: Sure. Thanks for having me.