#internationalization

I'm Richard Kerrigan, and I'm thrilled to be here today to show you how you can add multilingual support into your React apps. The problem we're trying to solve is that most websites, web apps, only publish content in one language, which is not convenient for users and is not inclusive for people for whom that language is not their primary language. We need a way to support other languages and dialects on our websites and web apps without adversely affecting our team's productivity. Now there are various ways we could approach solving the problem, depending on the resources we have available to us. But for the sake of this talk, let's assume that we don't have much budget to dedicate to this feature, nor do we have a team that can translate content for us. This is a fantastic use case for AI and automation. When my team started tackling this problem, we found the Azure AI translator service. It offers ad hoc text translation and document translation, with key features such as language support, cost-effectiveness, and accuracy. It also allows the use of custom glossaries to tweak the translation process. However, there are some limitations, such as compatibility with certain file types and the need for result validation and possible tweaking. Let's now focus on designing the workflow for translating content stored as JSON. Here's an example of how you could achieve this. We're taking the pieces of data that need to be translated and sending each piece through the translator. Then, we send the translated content as a response. For JSON content, the translation can be done at runtime in a React server component or an API route. For HTML or Markdown files, the translation can be incorporated into the CI-CD workflow, involving Azure Blob Storage, Azure Function App, and the app's source code files. Instead, we've moved the translation process to our GitHub Actions workflow. We provision the necessary resources in Azure, build and deploy the function app, and then perform the translation process. We configure the translation endpoint, specify the glossary for tweaking translations, and execute the translation. Once the translation is complete, we create a new blob in the output location. Our GitHub workflow ensures that all translations are done before proceeding to the next step, where we upload and download the artifact for deployment. This ensures that all content is translated and avoids errors for missing files. When setting up the translation process, it felt like magic. The pipeline for translating Markdown content is the same as for HTML content. The difference lies in how the metadata is handled. In HTML, the metadata is stored in the head of the file, while in Markdown, it is within the front matter section. When translating HTML files, the head needs to be translated as part of the process. For Markdown files, the metadata needs to be translated separately due to issues with Azure AI Translator. The translation function parses and translates the original files' metadata, then combines it with the translated files' content. The GitHub actions workflow provisions Azure resources, builds and deploys the function app, and runs the translation process for both HTML and Markdown files. The process is now deploying the ARM template that includes the necessary resources. We discussed the problem of limited language support on websites and web apps, the benefits of Azure AI Translator, and alternative solutions. We also explored different versions of the app for translating JSON, HTML, and markdown content without learning a new language. If interested, you can find more information and resources on GitHub and Azure AI Translator. The workflow is now deploying and translating the markdown files. It ensures all files are translated before deployment. Once the translation is complete, the files are put back into the repository. The deployment process guarantees the presence of all necessary resources. After a brief wait, the web app is ready to be viewed. The blog contains multiple posts. The metadata provides the title and excerpt for each post. The markdown is parsed into HTML for rendering. Formatting is preserved in different languages. Feel free to connect with me on LinkedIn or X.

Hi, I'm Mariko from Chrome Developer Relations Team. Let's dive into the talk, leveling up JavaScript. I sat down and learned JavaScript. I sat down and learned ES6 again. TC39 has published a new version of JavaScript spec every year. I want to focus on the parts of JavaScript that got updates recently. So ArrayFlat creates a new flattened array. You can also pass a depth argument to flatten nested arrays. Another method, copyToReserve, creates a reversed copy of an array. There's also copy to sort, which creates a sorted copy of an array. Another useful method is array to spliced, which allows you to remove and add items to a copied array. Lastly, the array at method returns an item at a given index. Array at accepts negative numbers for reverse order lookup. Find last iterates in reverse order and returns the item or index. Copy to change the value at a given index with a function. Object group by allows grouping and creating a new object by type. JavaScript intl allows for word segmentation in different languages, improving readability. It also includes features like data type format, number format, and plural rules for locale-based results. Staying up to date on web features is challenging due to time-consuming research and potential errors in implementation. Baseline provides clear information on web platform features supported by major browsers, ensuring compatibility without issues. Baseline provides two levels of support: newly available and widely available. By aligning your project to Baseline, you can confidently avoid browser compatibility issues. You can use Baseline to keep up with what's new on the web by installing the Baseline widget. Websites and dashboards like feature explorer and web starters.dev have been released. The project roadmap includes developer tooling and integrating Baseline into linters and actions. Check the RAM archive insights page for user data based on Baseline years. We are planning for more tools next year, including linting and AI integration.

Computer ethics is the set of agreed upon principles that govern the use of technology, and integrating ethical frameworks into the decision-making process reflects a commitment to fostering a compassionate technological landscape. Incorporating ethics early in the product development cycle can avoid exclusions and financial losses, and can be done through premortems and check-ins. Promoting proactive inclusivity involves validating and prioritizing goals, conducting user testing, and following the Association for Computing Machinery's Code of Ethics. Additional resources include books on computer ethics and the Design Justice Network.

Today's Talk covers internationalization with the Powered Language Bundle and leveraging AI capabilities. It emphasizes the importance of planning AI roles and workflows, customizing content locally, and understanding different content types. The translation process involves linguistic analysis, accurate system instructions, and experimentation with different communication methods. The workflow includes using Express Server and Storybook for translations, connecting metadata with the user interface, and integrating AI technology responsibly for efficient and effective results.

Today's Talk explores the impact of I18n and DEX for developers, the challenges of I18n, and the importance of understanding different approaches. It discusses determining languages and regions using IP address, browser settings, and URL patterns. The Talk also covers translation loading, using the i18xProvider, and addressing issues such as URL parameters and maintaining translation files. Additionally, it explores connecting with a Content Management System, implementing folder level translation, and utilizing code splats for dynamic routes.

This Talk discusses building JavaScript apps with internationalization in mind, addressing issues such as handling different name formats, using Unicode for compatibility, character encoding bugs, localization and translation solutions, testing in different languages, accommodating translated text in layouts, cultural considerations, and the importance of enabling different languages for users. The speaker also mentions various open source tools for internationalization. The Talk concludes with a reminder to avoid assumptions and embrace diversity in the World Wide Web.

I'm going to talk about localisation in the real world and how Sanity, a platform for structured content, focuses on content as data and flexible internationalization. Sanity allows for multiple languages in different markets, providing customization options for content visibility based on location. The platform offers a flexible approach to content creation and customization, allowing organizations to internationalize their content based on their specific needs. With Sanity's query language and the brand new version of Sanity Studio, developers have more flexibility than ever before.

Sanity.io provides a content platform for structured content that replaces traditional CMS. Their solution allows businesses to structure and query content anywhere using the Sanity studio and open source React application. The talk focuses on solving the challenge of sending personalized data to users in a static website environment using Next.js Vercel for hosting and Sanity for content querying and delivery. The Sanity studio allows for modeling pages, articles, and banners, with banners being shown to visitors based on their country. The solution involves using Grok queries to fetch the right banner based on country information, demonstrating personalization based on localization and dynamic content querying.

Thanks for joining my talk on end-to-end internationalization. I'll walk you through internationalizing a React app, covering translated strings, currency and date formatting, translator management, and injecting translated strings back into the app. The constants used throughout the app define localization settings and translations. The React Intel library is used for managing translations, and custom functions are created for consistent date and number formatting. The translation process involves extracting strings, using tools like PO Edit, and compiling the translated strings into JSON files for the React app.

Did you know that 50% of users will NOT use the English version of your application, if it supports multiple languages? For ambitious high-growth businesses, going global is not "if" but "when" so it's important to recognize the importance of localization, especially in large multi-team projects. This discussion will explore the depths of localization in Agile companies and what can be achieved with a Continuous Localization system. I'll share some common issues we faced with multi-language products and how localization automation helped us to scale the process across many product teams within the company.

This Talk explores the UTF-8 encoding and its relationship with emojis. It discusses the history of encoding, the birth of Unicode, and the importance of considering global usage when building software products. The Talk also covers JavaScript's encoding issues with Unicode and the use of the string.prototype.normalize method. It highlights the addition of emoji support in Unicode, the variation and proposal process for emojis, and the importance of transparency in emoji encoding. The Talk concludes with the significance of diverse emojis, the recommendation of UTF-8 for web development, and the need to understand encoding and decoding in app architecture.

The Talk discusses the challenges of adding and maintaining new languages in a React application and suggests ways to make the process easier. It defines internationalization as the process of architecting an application for localization and explains that localization involves adapting the content and experience for a specific locale. The speaker recommends using libraries for internationalization and provides resources for learning more about the topic. The Talk also addresses edge cases and difficulties with multiple dialects or languages, translation processes, and right-to-left CSS libraries.