In episode 40 of JAMstack Radio, Brian speaks with Manvel Saroyan, a developer at eyeo, working on Adblock Plus. They discuss the difficulties of integrating multi-language support into dev projects as well as Manvel’s lifestyle as a digital nomad.
About the Guests
Brian Douglas: Welcome to another installment of JAMstack Radio. On the line, we've got Manvel Saroyan calling in from Sicily. Is that correct?
Manvel Saroyan: Yeah, exactly.
Brian: Excellent. I think you're our first caller from Italy at all, for the history of the podcast. So, welcome.
Manvel: Thanks, Brian. I am in Sicily right now, a beautiful city called Catania, looking forward to the show.
Brian: Yeah. Do you want to go ahead and share your background? Also, I know that literally we spoke a couple of months ago and you were in Germany.
Do you want to speak about your background as a digital nomad, as well as your work currently in the web space?
Manvel: Basically, my background is that for the last five years I was living in Germany. It's been already a month since I switched to the digital nomad lifestyle.
I'm working on a company called eyeo, and it's the company behind a popular ad blocker, which is called Adblock Plus.
I'm involved in the UI development and the UI team, I am also a former dev side module owner, so I was dealing a lot with localization and translation of websites and also the actual UI of Adblock Plus
Brian: Excellent, cool. What's your reason for being a digital nomad, though? I'm curious about the rotating of the different spaces since we've talked.
Manvel: Yeah, I think one of the main reasons is that I do like traveling. Secondly, I never liked the regular office atmosphere. If one can work from wherever the person works and can use that chance, yeah, I would suggest to do it.
Brian: Yeah. It comes in handy with some of the work you've been doing with your side project, like CMintS-- I think I'm pronouncing that correctly, as well as some of the multi-language support you've been doing around that project.
Do you want to talk about multi-language support and the web, and how you made a niche into solving that problem?
Manvel: I wouldn't say that I've solved the problem--
Brian: OK, yeah.
Manvel: I don't think that anyone has yet solved the internationalization problem completely.
Brian: Yeah. That is definitely fair.
Manvel: I was lately developing a project, which I'm actually not entirely sure what's the right pronunciation for it, but I do pronounce it "Smints."
Manvel: Yeah, it stands for like CMS with Internationalization, but it's actually a static site generator. You can also run it on your server as well.
Brian: So, what was the purpose for creating your own static site generator? Because I know there's a lot out there as of today. If you go to StaticGen.com you'll see hundreds actively being maintained. For CMintS, what's the reason for it?
Manvel: Yes, exactly. There are a lot of static site generators, and it was one and half or two years ago that I actually wanted to create a website for myself for one of my side projects.
The issue I was faced upon is that I noticed that none of the existing static site generators were fulfilling all my requirements.
Even though it would be possible to meet them with additional plugins and additional modifications, I wanted something out of the box because I didn't want to maintain the modules as an additional chance that I would introduce into the actual static site generator.
After going through the frustration of a couple of months not being able to find something that would work out of the box perfect with all my requirements, I decided just to do what a usual developer would do and just create your own.
So, I was trying to create something that would hopefully be useful for other people as well.
Brian: I see a lot of call-outs, like there's a lot of open source projects that always have a call-out and say, "We want to make support for Japanese," or "We want to have support for these different right to left languages."
I think Kent C Dodds, he's been on this program before, has talked about working in right to left languages with PayPal.
If I am working on an open source project, or if I'm working on the marking side of the JAMstack, how do I approach CMintS and how do I interact with my different translations? How are they stored? That's what I'm getting at.
Manvel: OK, if your question is about the languages that are using a different direction, it mostly have almost nothing to do with what static site generator you would use.
Manvel: It's mostly about layouting correctly, because if you're saying HTML tags using attributes, saying it's a right to left document, the layout would shift.
If you're using right markup and correct styles, then it would work the way that you would expect. But there are some common issues that people face when there are, for example, having the right or left margin, and whenever the layout shifts they would need to adjust it as well.
It's always a good idea whenever you are developing a layout to consider a solution that wouldn't require adaptation for different languages.
Otherwise, it's like the classic solution. Just override it for specific directional languages.
Brian: OK. So instead of installing left pad initially in your project, get right pad installed if that exists? Sorry, a bad joke. I'm just throwing that one out there.
Manvel: Yes. If our our-- exists applies changes, or designs ways that you wouldn't need to do it. For example, using flex bots where possibly some other modern solutions.
Brian: I'm curious if there are any-- Aside from CMintS, if there is any other projects out there that solve this whole translation problem?
Being able to quickly be able to the flip on or do some localization based on tracking pixels, or whatever your domain that you're searching from?
Are there any other popular projects that help solve this problem?
Manvel: In general, there are a lot of static site generators that also say that they work with a multi-language website.
But most of them are using an approach which is like "One load kill per day." Basically what it means is that you're creating a separate page for each language.
Let's say you have the content for your page in English and in German and in Spanish, and the problem with that approach is usually in scalability.
It's fine if you're developing a project like Wikipedia when each content in each language can be different, but it's making things complicated when you need to use a Translation Management System and work with the translators and keep scaling.
For example, what I wanted to do is write my content in a markdown and be able to assign string IDs and descriptions to specific text.
So I can communicate with a translator if there is any specific information that they need to take into consideration when translating. Also be able to use other TMS to synchronize with CMintS, so it's like a different approach.
One is using your translating page completely, and whenever there is a change in the original text it's really hard to track what exactly else has been changed in the translation.
Brian: For handling translations, I've been on two types of projects. One where we thought of localization from the beginning, so we had the IDs set up within the project, we had proper translations and then we made the change copy.
That previous company we only had two different translations, English and Spanish, but there's other companies where we started with no translations and no localization.
So, where would you begin if you have no translations but you want to take this step into localizing your project?
Manvel: There are different approaches. A visitor of you would go with the easier approach, which would probably be using, for example, again a local page, and you end up doing probably what a lot of people are doing.
Just say to the translator, "Here is all the content, translate it to another language," or you'll need to assign strings to each paragraph, let's say, and then be able to maintain it in a more maintainable way.
But other than that, there are other issues that might arise. For example, if your original designed layout for one language, you probably didn't consider that in other languages maybe it might be that you were using some fixed widths, and in the other languages the words are becoming much more bigger.
You'll need to adjust your layout to be more flexible, and do not consider only impacted for a specific language. Then it again scales down to the question whether you need to support right to left language or not.
And I think I have touched also on some common localization issues in the latest blog post I've published in my blog, with video recording of my slides, where I also discussed some common issues which basically are also relevant to what we are discussing right now.
So, I'll also try to be sure to put the link into the show notes so people can also check it out, and have actual examples of how common issues look like and what approaches they can use to fix it.
Brian: I'll make sure to-- I've been running a separate jam picks site too as well, so I'll make sure to include that there too. That's JamPicks.netlify.com.
I'm curious, when you are managing different languages, how do you approach things like SEO and handling font files?
Because I imagine going from the ones with characters like Chinese and Japanese and Arabic, how do you manage font files and SEOs with other countries in mind as well?
Manvel: OK. Usually things with Chinese, Japanese, and Korean characters is becoming much more complicated.
Other than dealing with other languages, as soon as you are supporting more languages you will also need to ensure that your font itself is supporting those languages. The more you're supporting, the bigger the font pile is getting.
One approach for dealing with that is splitting actual font into the smaller chunks. Let's say, you can extract English or Russian characters and say "Whenever a page is loaded and its content characters that are within current range for specific fonts."
So in that case you don't need to load full 100 megabyte fonts that support all the languages including Chinese, Japanese, and Korean. But rather only fonts that are only relevant for a specific page. That's one approach.
Brian: Yeah, so this is me being naive, but as you explain this I'm thinking of how CDNs are set up and if I'm going to host this on AWS or whatever, my assumption is it's going to be different data centers within those different regions.
So would it make sense to have, on the edge, identify fonts that might be mainly used in those regions and make sure they're cached prematurely that way? Is that possible?
I think if I were to solve this problem today and I had to approach this, I might have to look at the edge and see "Maybe in this region, leverage mainly Japanese and Chinese characters. But if it's New York, maybe do that less, but still do it."
Manvel: Sure, absolutely.
Brian: Is that possible?
Manvel: Adding additional caches, yes. It's a good idea for considering a CDN, but anyway, the user will downloads font once and it will be cached locally. So, the biggest challenge I think is about clicking into a cache.
How much you would try to cache it is again, it's too-- Yeah, you'll cache it on the server side, but they still need to double it, and if they are on a slower connection that might still cause some issues.
Brian: Excellent. I don't know if there's anything else we can cover about this multi-language support, maybe if you have any other best practices or wins that you have? Maybe personal experiences that you can share?
Manvel: Sure, absolutely. There are a lot of aspects that people need to take into consideration when they are developing multi-language websites.
So if one of the things is, for example, serving irrelevant content and the challenge is that with a static site generator you're not always going to have that possibility.
For example a user visiting your home page and depending on the geolocation or language preference you would like to serve a specific page. You might not have that ability, for example.
Yet you can do a setup redirects in Netlify, but let's say you are hosting the website and on a Github page or GitLab page, it's becoming more challenging.
That's one of the things that, for example, when I'm traveling and it's quite annoyed me quite a lot.
For example, whenever I'm in Italy or in Germany I'm getting served German or Italian advertisements, even though I don't have my browser set up as-- Italian or German setup as my language preference.
So, that is something that it would make sense to take into consideration. There is also one thing, that if you are creating strings and you need to support also order of the text.
So let's say you have a sentence and you have links and other simple markups, let's say. It's good to take into consideration that in different languages, the order of the words can be different.
Ensuring that the solution you are using for localization, it also supports switching the order of the tags.
Brian: Excellent. You do have your site that you mentioned as well, which is Manvel.me. You have your talks there, so I do recommend listeners to check that out and check out those talks, check out some of the content you're putting out there.
I think this is definitely a problem that people will have to solve more and more in the future, and I see more-- Like I'd mentioned before, more and more projects are reaching out trying to find translators because they're trying to set themselves to succeed in new spaces.
Just recently, a few weeks ago, my employer GitHub sent out a tweet saying "We're hiring in India," which is going to be a whole other slew of trying to support languages in the future.
So, with that being said, we are always looking for ways to solve these problems and CMintS is in all of everything in the bag of tricks. I think it's a good step in the right direction if you're already using a static site generator.
Listeners, if you did not get that spelling, it's C-M-I-N-T-S. That's CMS for Internationalization. With that being said, Manvel if you don't mind, I'm going to transition us to picks.
These are jam picks, things that keep us going. Could be food related, could be entertainment, could be tech related as well. I have almost a tech pick, but I'm curious, would you like to go first?
Manvel: Sure, absolutely. I'll start with drones, because I've got lately obsessed with drones. Unfortunately, I've lost one in Malta a couple of weeks ago, but thankfully I got a new one.
Brian: You're not like, breaking any international laws by losing drones in Malta?
Manvel: So, be careful with high winds and interference for remote controls.
Next pick would be a YouTube video from computer file about Internationalization by Tom Scott. So, that's something I'll also recommend to have a look if you're trying to make your website multi-language.
Coming back to your question, "What would one consider if they want me to translate their website?" That's a resource I'll definitely recommend to watch first.
Brian: Excellent. One thing to mention, I do have a small pocket drone that I got for speaking at a conference once, and I pull that thing out like every once in a while just to annoy my wife, but also have fun with my son.
The pocket ones are so challenging because just having an open window and having a breeze, those things get knocked around all the time. But yeah, I'm a big fan of drones, but I am also scared that I'll lose them pretty frequently.
I'm going to transition to my picks as well. I had one pick, which is like a tech pick but not really. I was hanging out at Rails Conf last week and one of my co-workers mentioned about them trying to learn a new language, so she changed her entire phone to French.
Which I think is like-- Since we're talking about languages, I actually just thought of this, because I'm trying to hopefully before the end of the year become fluent in Spanish. Or, at least conversational.
I've hit some ceiling of actually putting myself out there and speaking in Spanish, so I did switch my phone for a little bit, but I switched it back out of intimidation. But my goal is to hopefully switch my phone to Spanish so that way can be a little more fluent before the end of the year, and a little more confidence.
I think one thing I noticed when I was in Japan a couple months ago is everything-- Because some of the local apps for navigation automatically switch everything to Japanese, and not knowing what character is what is extremely intimidating.
So, I was very paranoid to put myself out there and go explore too far. That's my one pick.
My other pick, I ended up making bagels. Episode 39 I had a pick of starting to make sourdough, and we made a "Sour bro" joke. The guest on that episode, Ben, he had mentioned about a bagel recipe.
Go back to the episode to find the recipe, because I did that recipe and it came out successful, so I made plain bagels and I made everything bagels.
Which leads me to my final pick, and that's Trader Joe's, which is a local grocery store chain based here in the United States. I think actually, originally they were German.
Maybe the brothers were German? But regardless, they have Everything Bagel Seasoning, and it's great because it's everything except the fennel seeds which are the most bitter part of the Everything Bagel Seasoning.
For listeners who are not-- I realize we're talking about multi-language support, so if you aren't familiar with Everything Bagel Seasoning it's garlic and onion salt and all these great flavors together that can go on anything.
I personally believe Everything Bagel Seasoning is like the new Sriracha. I can literally put it on anything, and it works. So, those are all my picks.
I know that was all a mouthful. I think everybody's mouth is watering as I explain these bagels, but follow me on Twitter to see what these actually look like.
With that, Manvel, thank you very much for coming on and talking about multi-language support, CMintS and your background as a digital nomad.
Hopefully listeners got a lot of things to start turning in their brain to maybe start thinking about how to solve multi-language support on their sites.
Brian: With that, listeners, keep spreading the jam.