Let’s Remix to Localize Content!

Rate this content
Bookmark

Have you ever wished to have a flexible approach to localize your content to scale easily? Join my talk, and I'll show you multiple strategies to translate and localize your content with Remix. I'll share with you flexible dynamic route options from Remix to generate localized content in a practical way, including a headless approach demo and how to scale your solution in the future. Let's "Remix" to localize your content!

Arisa Fukuzaki
Arisa Fukuzaki
36 min
18 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Talk introduces Remix and internationalization, highlighting the impact and importance of internationalization in software development. It explores different approaches to internationalizing URLs and the use of Remixi18next for internationalization in Remix. The Talk covers the creation and configuration of translated files, as well as the importance of loading translation files before hydration for improved performance. It discusses the challenges and benefits of localization, including the use of folder-level translation and dynamic routes. The Talk also touches on different translation approaches and the importance of considering user experience and understanding in different languages.

1. Introduction to Remix and Internationalization

Short description:

Hi, everyone. I'm excited to talk about Remix and internationalization. There are three takeaways from my talk: the impact of internationalization, the fundamental logic, and how Remix and internationalization work together. Before we dive in, I want you to know that there are active discussions happening about Remix and internationalization. You can contribute to improving the DX. I'll share the slides and links on Twitter. Now, let's talk about internationalization with Remix. I asked developers on Twitter about their thoughts on implementing internationalization logic. 41.7% of the 36 developers said it's not their favorite and can be annoying. I wanted to know more, so my friend Maya explained that implementing internationalization features is not a day-to-day task for her. There can be issues with localized text and internationalization keys. Internationalization may not be a hot topic for developers, but it's important to consider its impact on the world and the user's perspective.

Hi, everyone. I hope you're doing well, and I'm very excited to see you all, as well as I'm very excited to talk about Remix and internationalization. Well, not to waste any more time, here's little things about me. My name is Eryssa and I'm an engineer as well as an ambassador at girl code and Google Developer Expert in web technologies.

Well, there are three takeaways from my talk. First of all, we are going to take a look at the impact of the internationalization, as well as the fundamental logic, and lastly, we are going to see how Remix and internationalization together.

There are a few notes that I want you to keep in your mind before you watch my talk. First of all, there are still active discussions going on about Remix and internationalization. It means that you could be one of the persons to contribute to improve the DX. So, yeah, feel free to take a look at the discussions, or even join the discussions. I'm going to share with you the slides later on, after my talk on Twitter, so you will get access to all the links that I, yeah, pasted in these slides. All right. So, let's get to the point. We are here to talk about internationalization, and how it works with Remix.

So, while I was preparing my talk, I wanted to include as many as opinions from the developers out there, not just from my side. So, I started to ask this question on Twitter. So, do you like to implement internationalization logic? And this is the result I got. So, first of all, I got the result from 36 developers, and they say about 41.7% of the developers, they say like, it's not my favorite. It's kind of an annoying process to do that. And based on this fact, I also wanted to know, okay, I want to know more about the details, but probably from what I see, this quick poll question on Twitter, maybe for us developers, it is not a prioritized hot topic compared to performance and accessibility. But of course, I want to know more. Why? So, I asked. If the internationalization is not your favorite part, why is it like this? So, here's my friend, Maya, responded me. Thanks, and first of all, she says like, well, it's not like she implements internationalization feature like on to day-to-day basis, means that when she needs to do that, she needs to take a look at again how it works from the internationalization libraries or the frameworks she uses every time. Also, there is a little bit of issue between localized text and internationalization keys, you know, like during the test. So we know that, okay, probably like internationalization is not the hottest topic, and that's not something like fun part for developers. And based on what we think, of course, we also need to take a look at or see like how is it like in the world and how is it like for the user's perspective as well. So here's the little numbers and effects. I'd like to start from something bigger numbers. So first of all, I want you to think about this number.

2. Introduction to Internationalization Logic

Short description:

What do you think this 5.07 billion number stands for? It is actually the numbers of the users in the world who use the internet. So breaking down, you know like these big billions of numbers into smaller percentages, starting from 25.9 percent. What do you think about this percentage? This is actually the percentage of the English content on the internet. 25.9 is less than 50 percent, which means that if you're good at math, then you could probably like calculate this number. China has the most internet users worldwide. Asia needs more than half of global internet users. Let's talk about the fundamental logic of internationalization. Internationalization works in three ways to determine the languages and the regions. The first approach is location from the IP address, the second is using accept language header from the HTTP request or the navigator languages, and the third is using the identifier in URL. We are going to use two ways to go hybrid: allowing users to change languages on the browser and detecting their preferred language setting. There are three patterns to take a look at for the identifier URL, with pattern one being a way to differentiate localized content by domains.

What do you think this 5.07 billion number stands for? It is actually the numbers of the users in the world who use the internet. So breaking down, you know like these big billions of numbers into smaller percentages, starting from 25.9 percent. What do you think about this percentage? This is actually the percentage of the English content on the internet. 25.9 is less than 50 percent, which means that if you're good at math, then you could probably like calculate this number.

74.1 yes, that's the rest of the percentage of the users who access non English content on the internet, which leads us to this keyword, China. So China actually has the most internet users worldwide. No surprise based on this fact. We also could think about this keyword Asia, so yes, Asia needs more than half of global internet users. That's massive, right? So yes, now we know. Probably localizing content is not the hottest topic for us developers. However, we cannot ignore no matter what, you know, like from this more than a half of the users in the world. It's too massive numbers to ignore.

So based on what we know and what we feel, let's talk about the fundamental logic of internationalization. So first of all, internationalization works in three ways to determine the languages and the regions. The first approach, the most top-end here says, location from the IP address means that based on the IP address, for example, where I am based on right now in Germany, the content that I take a look at on the internet will detect I'm based in Germany, so the content would be, you know, displayed in German sometimes, if they take this approach. If they use the second approach, means using accept language header from the HTTP request or the navigator languages, means that they will take a look at my language preference. So, in the browser, I prefer to use the English, so that's what I configure in my setting, and that's what, you know, like, the information is going to be used to, you know, like, return the localized content for me. So, sometimes, even when I'm based in Germany, I see the content in English as I preferred. And the third option is using the identifier in URL. Basically, it's actually, like, translating or localizing the URL for the users. So, it means, like, the easiest example would be, like, I will have the English, German, and Japanese, let's say, like, language, like, selector buttons on the browser, and I can click to select to take a look at the languages. In this talk, we are going to use two ways to go hybrid because I want our users to be more flexible and to have more control by themselves. So, I would leave the, you know, option for them to change the languages of their choice on the browser from the UI as well as, first of all, like, let's be nicer, detecting their preferred language setting on the browser. So, we saw together, like, how it works or what's the fundamental logic in the internationalization. As for the identifier URL, there are three patterns to take a look at it. So, let's break it down. So, pattern one. So, this is a way to differentiate, you know, like, the localized content by domains. Basically, you're going to create a totally different kind of website, in this case. But the domains are different.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
How to Solve Real-World Problems with Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
Michael Carter
Michael Carter
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Build and Launch a personal blog using Remix and Vercel
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
Robert Pop
Robert Pop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.