Let’s Remix to Localize Content!

Rate this content
Bookmark
Slides

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
28 min
05 Dec, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Talk explores Remix and internationalization, discussing the impact and logic of internationalization and the challenges developers face. It highlights the global usage of the internet and the importance of localizing content. The fundamental logic of internationalization is explained, including location-based, header-based, and URL-based approaches. The implementation of internationalization in Remix is demonstrated using Remix IAT Next package and a Content Management System. The Talk also covers client-side and server-side configuration, importing and wrapping translation files, and implementing dynamic routes with Remix.

Available in Español

1. Introduction to Remix and Internationalization

Short description:

Hi everyone. I'm very excited to see you all and talk about Remix and internationalization. I'm Arisa, a dev rel engineer at Storyblock and an ambassador at Girl Code and GDE. We'll explore the impact and fundamental logic of internationalization, and how it works with Remix. There are still active discussions on Remix and internationalization, so feel free to contribute. Let's dive in and see what developers think about implementing internationalization logic. It's not a prioritized hot topic, but why? According to Maya, it's not implemented on a day-to-day basis and there are issues with localized text and internationalization keys. Let's explore internationalization from a global perspective and consider the user's point of view.

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 is little things about me. My name is Arisa and I'm a dev rel engineer at Storyblock, as well as an ambassador at Girl Code and GDE, Google Developer Expert in Web Technologies.

Well, there are 3 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 works 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, which means that you could be one of the persons to contribute to improve DX. So 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 pasted in these slides.

All right, so let's get to the point. We are here to talk about the 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 30... 36 developers And they say like about 41.97% of the developers. They say, like, it's not my favorite. It's kind of annoying process to do that.

And based on this fact, I also wanted to know, like, hmm, 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 accessibilities. 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? Here's my friend, Maya, responded me. Thanks, Maya. First of all, she says, like, well, it's not like she implements internationalization feature, like, on to the day to day basis. Means that when she needs to do that, she needs to take a look again at how it works from the internationalization libraries or the frameworks she uses every time. Also, there's a little bit of issue between localized text and internationalization keys, you know, 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.

2. Global Internet Usage

Short description:

Let's talk about the global usage of the internet. There are 5.07 billion internet users worldwide. Only 25.9% of the content is in English, while 74.1% is non-English. China has the most internet users, and Asia accounts for over half of global internet users. Localizing content may not be a hot topic for developers, but it's too significant to ignore.

So here's the little numbers and the facts, I'd like to start from something bigger numbers. So first of all, I want you to think about this number. What do you think this 5.07 billion numbers, 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%. What do you think about this percentage? This is actually a percentage of the English content on the 25.9%. It's less than 50%. 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 from based on this fact. We also could think about this keyword, Asia. So yes, Asia needs more than a 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.

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.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
This talk introduces the new Flat Routes convention that will most likely be the default in a future version of Remix. It simplifies the existing convention as well as gives you new capabilities.
Remix Architecture Patterns
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Remix Architecture Patterns
Top Content
Remix provides amazing flexibility and can be deployed anywhere where JavaScript is running. But how does Remix fit into the bigger application landscape of an organization? Remix provides great utility, but how to best take advantage of it? What things should be handled inside of Remix, and what things are better off done elsewhere? Should we use the express adapter to add a WebSocket server or should that be a standalone microservice? How will enterprise organizations integrate Remix into their current stacks? Let’s talk architecture patterns! In this talk, I want to share my thoughts about how to best integrate Remix into a greater (enterprise) stack.

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
Building High-Performance Online Stores with Shopify Hydrogen and Remix
React Advanced Conference 2023React Advanced Conference 2023
104 min
Building High-Performance Online Stores with Shopify Hydrogen and Remix
WorkshopFree
Alexandra Spalato
Alexandra Spalato
I. Introduction- Overview of Shopify Hydrogen and Remix- Importance of headless e-commerce and its impact on the industry
II. Setting up Shopify Hydrogen- Installing and setting up Hydrogen with Remix- Setting up the project structure and components
III. Creating Collections and Products- Creating collections and products using Hydrogen’s React components- Implementing a Shopping Cart- Building a shopping cart using Hydrogen’s built-in components
VI. Building the home page with Storyblok- Cloning the space and explaining how it works- Implementing Storyblok in the repo- Creating the Blok components- Creating the Shopify components- Implementing personalisation
Localizing Your Remix Website
React Summit 2023React Summit 2023
154 min
Localizing Your Remix Website
WorkshopFree
Harshil Agrawal
Harshil Agrawal
Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website.
Table of contents:- Introduction to Localization- Introduction to Contentful- Localization in Contentful- Introduction to Remix- Setting up a new Remix project- Rendering content on the website- Implementing Localization in Remix Website- Recap- Next Steps